123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- import { defineComponent, reactive } from "vue";
- import styles from "./index.module.less"
- import { headImg } from "../image";
- import { headTopData } from "../index"
- import { Switch, showToast, Field, Popup } from "vant";
- import state from "/src/state"
- import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
- import Recommendation from "../../custom-plugins/helper-model/recommendation";
- export default defineComponent({
- name: "settting",
- setup() {
- const helperData = reactive({
- screenModelShow: false, // 投屏帮助
- recommendationShow: false, // 建议
- });
- // 加减评测频率
- const operateHz = (type: number) => {
- const minFrequency = state.baseFrequency - 10, maxFrequency = state.baseFrequency + 10
- let currentFrequency = state.setting.frequency
- if (type === 1) {
- if (currentFrequency - 1 < minFrequency) return showToast({ message: `最低标准音高${minFrequency}HZ` })
- currentFrequency = currentFrequency - 1
- } else {
- if (currentFrequency + 1 > maxFrequency) return showToast({ message: `最高标准音高${maxFrequency}HZ` })
- currentFrequency = currentFrequency + 1
- }
- state.setting.frequency = currentFrequency >= 0 ? currentFrequency : 0
- }
- const formatterTimeMs = (value: any) => value = String(Math.min(3000, value));
- return () => (
- <div class={styles.settting}>
- <div class={styles.head}>
- <img class={styles.headTit} src={headImg("settingName.png")} />
- <img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headTopData.settingMode = false }} />
- </div>
- <div class={styles.content}>
- <div class={styles.conBox}>
- <div class={styles.cellBox}>
- <div class={styles.tit}>指法</div>
- <Switch v-model={state.setting.displayFingering}></Switch>
- </div>
- <div class={styles.cellBox}>
- <div class={styles.tit}>循环播放</div>
- <Switch v-model={state.setting.repeatAutoPlay}></Switch>
- </div>
- <div class={styles.cellBox}>
- <div class={styles.tit}>旋律线</div>
- <Switch v-model={smoothAnimationState.isShow.value}></Switch>
- </div>
- <div class={styles.cellBox}>
- <div class={styles.tit}>标准音高</div>
- <div class={styles.frequency}>
- <img src={headImg("cutImg.png")} class={[styles.btn]} onClick={() => operateHz(1)} />
- <div class={styles.frequencyNum}>{state.setting.frequency}HZ</div>
- <img src={headImg("addImg.png")} class={[styles.btn]} onClick={() => operateHz(2)} />
- </div>
- </div>
- <div class={styles.cellBox}>
- <div class={styles.tit}>反应时间</div>
- <div class={styles.reactionTimeBox}>
- <Field class={styles.reactionTime} type="digit"
- placeholder="最大可输入3000毫秒"
- formatter={formatterTimeMs}
- input-align={'center'}
- v-model:modelValue={state.setting.reactionTimeMs} />
- <div class={styles.timeName}>毫秒</div>
- </div>
- </div>
- <div class={styles.cellBox}>
- <div class={styles.tit}>切换谱面</div>
- <div class={styles.radioBox}>
- {
- [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
- return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ state.isSingleLine = item.value } }>{item.name}</div>
- })
- }
- </div>
- </div>
- <div class={styles.cellBox}>
- <div class={styles.tit}>转谱</div>
- <div class={styles.radioBox}>
- {
- [{name:'五线谱',value:'staff'},{name:'首调',value:'firstTone'},{name:'固定谱',value:'fixedTone'}].map(item=>{
- return <div class={ state.musicRenderType===item.value && styles.active } onClick={ ()=>{ state.musicRenderType = item.value as any} }>{item.name}</div>
- })
- }
- </div>
- </div>
- <div class={styles.cellBtnBox}>
- <img src={headImg("tpbz.png")} />
- <img src={headImg("yjfk.png")} onClick={() => (helperData.recommendationShow = true)} />
- </div>
- </div>
- </div>
- <Popup
- v-model:show={helperData.recommendationShow}
- class="popup-custom van-scale center-closeBtn recommenBoxClass_drag"
- transition="van-scale"
- teleport="body"
- overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}
- >
- <Recommendation
- onClose={() => {
- helperData.recommendationShow = false;
- }}
- />
- </Popup>
- </div>
- );
- },
- });
|