|
|
@@ -255,145 +255,168 @@ export default defineComponent({
|
|
|
} catch (error) {}
|
|
|
});
|
|
|
return () => (
|
|
|
- <div
|
|
|
- id="selectionBox"
|
|
|
- class={[
|
|
|
- styles.selectionContainer,
|
|
|
- ]}
|
|
|
- onClick={(e: Event) => e.stopPropagation()}
|
|
|
- >
|
|
|
- {selectData.staves.map((item: any) => {
|
|
|
- // 评测得分
|
|
|
- const scoreItem = item.id && evaluatingData.evaluatings[item.measureListIndex];
|
|
|
- // for(let idx in evaluatingData.evaluatings) {
|
|
|
- // const { show, measureIndex } = evaluatingData.evaluatings[idx]
|
|
|
- // if (show && measureIndex !== item.measureListIndex) {
|
|
|
- // evaluatingData.evaluatings[idx].show = false
|
|
|
- // }
|
|
|
- // }
|
|
|
- // 高级模式下，显示节拍线
|
|
|
- // 不是报告模式
|
|
|
- // 不是多小节休止符
|
|
|
- // 节拍线开关
|
|
|
- // 当前小节
|
|
|
- // 当前小节
|
|
|
- const lineShow =
|
|
|
- !state.isReport &&
|
|
|
- metronomeData.cursorMode === 2 &&
|
|
|
- item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML &&
|
|
|
- state.times[state.activeNoteIndex].MeasureNumberXML === item.MeasureNumberXML;
|
|
|
- return (
|
|
|
- <>
|
|
|
- {item.staveBox && (
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.position,
|
|
|
- // scoreItem ? `scoreItemLeve${scoreItem.leve}` : "", // 去掉评测小节得分的背景色
|
|
|
- item.multipleRestMeasures <= 1 ? styles.staveBg : "",
|
|
|
- (state.platform === IPlatform.PC && state.zoom > 0.8) ? styles.linePC : '',
|
|
|
- ]}
|
|
|
- style={item.staveBox}
|
|
|
- onClick={() => handleSelection(item)}
|
|
|
- >
|
|
|
- {lineShow && (
|
|
|
- <div style={{height: selectData.measureHeight + 'px', position: 'relative'}}>
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.line,
|
|
|
- state.setting.eyeProtection ? styles.eyeLine : '',
|
|
|
- state.musicRenderType == EnumMusicRenderType.staff ? styles.lineStaff : styles.lineJianPu,
|
|
|
- ]}
|
|
|
- style={{ left: metronomeData.activeMetro.left }}></div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {!state.isReport &&
|
|
|
- !!item.multipleRestMeasures &&
|
|
|
- state.activeMeasureIndex == item.MeasureNumberXML && (
|
|
|
- <div class={styles.dotWrap}>{item.multipleRestMeasures}</div>
|
|
|
- )}
|
|
|
- <Transition
|
|
|
- name="centerTop"
|
|
|
- onAfterEnter={() => {
|
|
|
- scoreItem.show = false;
|
|
|
- }}
|
|
|
+ <>
|
|
|
+ <div class={styles.staveBgContainer}>
|
|
|
+ {
|
|
|
+ selectData.staves.map((item: any) => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {
|
|
|
+ item.staveBox && item.multipleRestMeasures <= 1 &&
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ left:item.staveBox.left,
|
|
|
+ top:`calc(${item.staveBox.top} + ${item.staveBox.height})`,
|
|
|
+ width:item.staveBox.width
|
|
|
+ }}
|
|
|
+ class={[styles.staveBg]}
|
|
|
+ ></div>
|
|
|
+ }
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="selectionBox"
|
|
|
+ class={[
|
|
|
+ styles.selectionContainer,
|
|
|
+ ]}
|
|
|
+ onClick={(e: Event) => e.stopPropagation()}
|
|
|
+ >
|
|
|
+ {selectData.staves.map((item: any, index) => {
|
|
|
+ // 评测得分
|
|
|
+ const scoreItem = item.id && evaluatingData.evaluatings[item.measureListIndex];
|
|
|
+ // for(let idx in evaluatingData.evaluatings) {
|
|
|
+ // const { show, measureIndex } = evaluatingData.evaluatings[idx]
|
|
|
+ // if (show && measureIndex !== item.measureListIndex) {
|
|
|
+ // evaluatingData.evaluatings[idx].show = false
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // 高级模式下，显示节拍线
|
|
|
+ // 不是报告模式
|
|
|
+ // 不是多小节休止符
|
|
|
+ // 节拍线开关
|
|
|
+ // 当前小节
|
|
|
+ // 当前小节
|
|
|
+ const lineShow =
|
|
|
+ !state.isReport &&
|
|
|
+ metronomeData.cursorMode === 2 &&
|
|
|
+ item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML &&
|
|
|
+ state.times[state.activeNoteIndex].MeasureNumberXML === item.MeasureNumberXML;
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {item.staveBox && (
|
|
|
+ <div
|
|
|
+ key={index}
|
|
|
+ class={[
|
|
|
+ styles.position,
|
|
|
+ // scoreItem ? `scoreItemLeve${scoreItem.leve}` : "", // 去掉评测小节得分的背景色
|
|
|
+ (state.platform === IPlatform.PC && state.zoom > 0.8) ? styles.linePC : '',
|
|
|
+ ]}
|
|
|
+ style={item.staveBox}
|
|
|
+ onClick={() => handleSelection(item)}
|
|
|
>
|
|
|
- {scoreItem?.show && (
|
|
|
- <div
|
|
|
- class={styles.scoreItem}
|
|
|
- style={{ color: leveByScoreMeasureIcons[scoreItem.leve]?.color || "" }}
|
|
|
- >
|
|
|
- <img src={leveByScoreMeasureIcons[scoreItem.leve]?.icon} />
|
|
|
- <span>{scoreItem.score}</span>
|
|
|
+ {lineShow && (
|
|
|
+ <div style={{height: selectData.measureHeight + 'px', position: 'relative'}}>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.line,
|
|
|
+ state.setting.eyeProtection ? styles.eyeLine : '',
|
|
|
+ state.musicRenderType == EnumMusicRenderType.staff ? styles.lineStaff : styles.lineJianPu,
|
|
|
+ ]}
|
|
|
+ style={{ left: metronomeData.activeMetro.left }}></div>
|
|
|
</div>
|
|
|
)}
|
|
|
- </Transition>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </>
|
|
|
- );
|
|
|
- })}
|
|
|
- {selectData.notes.map((item: any) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- class={[styles.position, disableClickNote.value && styles.disable, styles.note, `noteIndex_${item.index}`]}
|
|
|
- style={item.bbox}
|
|
|
- onClick={() => skipNotePlay(item.index)}
|
|
|
- >
|
|
|
- {/* <div class={styles.noteFollow} data-vf={"vf" + item.id}>
|
|
|
- <Icon name="success" />
|
|
|
- <Icon name="cross" />
|
|
|
- </div> */}
|
|
|
- <div class={styles.noteFollow} data-vf={"vf" + item.id}>
|
|
|
- {/* <Icon name="success" />
|
|
|
- <Icon name="cross" /> */}
|
|
|
- <div class={[styles.followTipUp, 'tip-up']}>
|
|
|
- <img src={IntonationUp} />
|
|
|
- <span>音准<i>高了</i></span>
|
|
|
- </div>
|
|
|
- <div class={[styles.followTipDown, 'tip-down']}>
|
|
|
- <img src={IntonationDown} />
|
|
|
- <span>音准<i>低了</i></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class={[styles.noteDot, 'node-dot']}></div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
- {/* 选段 */}
|
|
|
- {
|
|
|
- sectionPosData.value.map((item,index) =>{
|
|
|
+ {!state.isReport &&
|
|
|
+ !!item.multipleRestMeasures &&
|
|
|
+ state.activeMeasureIndex == item.MeasureNumberXML && (
|
|
|
+ <div class={styles.dotWrap}>{item.multipleRestMeasures}</div>
|
|
|
+ )}
|
|
|
+ <Transition
|
|
|
+ name="centerTop"
|
|
|
+ onAfterEnter={() => {
|
|
|
+ scoreItem.show = false;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {scoreItem?.show && (
|
|
|
+ <div
|
|
|
+ class={styles.scoreItem}
|
|
|
+ style={{ color: leveByScoreMeasureIcons[scoreItem.leve]?.color || "" }}
|
|
|
+ >
|
|
|
+ <img src={leveByScoreMeasureIcons[scoreItem.leve]?.icon} />
|
|
|
+ <span>{scoreItem.score}</span>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ {selectData.notes.map((item: any) => {
|
|
|
return (
|
|
|
- item && <div class={styles.selectBox} style={item}>
|
|
|
- <div class={[styles.selectHandle,index>0&&styles.selectHandleRight,(state.playState==="play" || query.workRecord)&&styles.playIng]} onClick={()=>{
|
|
|
- // 如果选择了2个 删除左边的时候
|
|
|
- if(state.section.length===2&&index === 0){
|
|
|
- state.section = []
|
|
|
- // 重置速度和播放倍率
|
|
|
- resetBaseRate(state.activeNoteIndex);
|
|
|
- showToast({
|
|
|
- message: "请选择开始小节",
|
|
|
- duration: 0,
|
|
|
- position: "top",
|
|
|
- className: "selectionToast",
|
|
|
- });
|
|
|
- }else{
|
|
|
- state.section.splice(index,1)
|
|
|
- state.section = [...state.section] // 触发 watch
|
|
|
- showToast({
|
|
|
- message: state.section.length?"请选择结束小节":"请选择开始小节",
|
|
|
- duration: 0,
|
|
|
- position: "top",
|
|
|
- className: "selectionToast",
|
|
|
- });
|
|
|
- }
|
|
|
- }}></div>
|
|
|
+ <div
|
|
|
+ class={[styles.position, disableClickNote.value && styles.disable, styles.note, `noteIndex_${item.index}`]}
|
|
|
+ style={item.bbox}
|
|
|
+ onClick={() => skipNotePlay(item.index)}
|
|
|
+ >
|
|
|
+ {/* <div class={styles.noteFollow} data-vf={"vf" + item.id}>
|
|
|
+ <Icon name="success" />
|
|
|
+ <Icon name="cross" />
|
|
|
+ </div> */}
|
|
|
+ <div class={styles.noteFollow} data-vf={"vf" + item.id}>
|
|
|
+ {/* <Icon name="success" />
|
|
|
+ <Icon name="cross" /> */}
|
|
|
+ <div class={[styles.followTipUp, 'tip-up']}>
|
|
|
+ <img src={IntonationUp} />
|
|
|
+ <span>音准<i>高了</i></span>
|
|
|
+ </div>
|
|
|
+ <div class={[styles.followTipDown, 'tip-down']}>
|
|
|
+ <img src={IntonationDown} />
|
|
|
+ <span>音准<i>低了</i></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={[styles.noteDot, 'node-dot']}></div>
|
|
|
</div>
|
|
|
- )
|
|
|
- })
|
|
|
- }
|
|
|
- {/* 移动模块 */}
|
|
|
- {query.isMove == "1" && <MoveMusicScore />}
|
|
|
- </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ {/* 选段 */}
|
|
|
+ {
|
|
|
+ sectionPosData.value.map((item,index) =>{
|
|
|
+ return (
|
|
|
+ item && <div class={styles.selectBox} style={item}>
|
|
|
+ <div class={[styles.selectHandle,index>0&&styles.selectHandleRight,(state.playState==="play" || query.workRecord)&&styles.playIng]} onClick={()=>{
|
|
|
+ // 如果选择了2个 删除左边的时候
|
|
|
+ if(state.section.length===2&&index === 0){
|
|
|
+ state.section = []
|
|
|
+ // 重置速度和播放倍率
|
|
|
+ resetBaseRate(state.activeNoteIndex);
|
|
|
+ showToast({
|
|
|
+ message: "请选择开始小节",
|
|
|
+ duration: 0,
|
|
|
+ position: "top",
|
|
|
+ className: "selectionToast",
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ state.section.splice(index,1)
|
|
|
+ state.section = [...state.section] // 触发 watch
|
|
|
+ showToast({
|
|
|
+ message: state.section.length?"请选择结束小节":"请选择开始小节",
|
|
|
+ duration: 0,
|
|
|
+ position: "top",
|
|
|
+ className: "selectionToast",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }}></div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ {/* 移动模块 */}
|
|
|
+ {query.isMove == "1" && <MoveMusicScore />}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
);
|
|
|
},
|
|
|
});
|
黄琪勇