Merge branch 'hqyDev' of http://git.dayaedu.com/lex/classroom-instruments into jenkins

src/components/Metronome/Metronome.vue

@@ -136,7 +136,6 @@ import Dragbom from '@/hooks/useDrag/dragbom';
 const emits = defineEmits<{
   (e: 'windowMet'): void;
   (e: 'closeMet'): void;
-  (e: 'speedNumChange', num: number): void;
   (e: 'playStateChange', state: 'play' | 'pause'): void;
 }>();
 
@@ -264,7 +263,6 @@ watch(speedNum, () => {
     pausePlay();
   }
   getCircleBar(speedToScalc(speedNum.value));
-  emits('speedNumChange', speedNum.value);
 });
 watch([beatVal, beatSymbol], () => {
   if (playState.value === 'play') {
@@ -413,7 +411,9 @@ function getCircleBar(steps: number) {
 }
 defineExpose({
   startPlay,
-  pausePlay
+  pausePlay,
+  speedNum,
+  beatSymbol
 });
 </script>
 
@@ -570,6 +570,7 @@ defineExpose({
                 font-weight: 500;
                 font-size: 14Px;
                 color: #333333;
+                margin-top: 4Px;
               }
             }
           }
@@ -818,6 +819,7 @@ defineExpose({
   --n-border-radius: 10Px !important;
   .n-scrollbar-rail.n-scrollbar-rail--vertical{
     right: 1Px;
+    width: 4Px;
     opacity: 0.6;
   }
 }

src/components/Metronome/MetronomeBox.vue

@@ -2,11 +2,10 @@
   <div v-if="isDrag" class="metronomeMinConMask"></div>
   <div
     class="metronomeMinCon"
-    :class="[metronomeMinConBoxClass]"
+    :class="[metronomeMinConBoxClass, metronomeShow && 'metronomeMinConHide']"
     :style="metronomeMinConDragData.styleDrag.value"
     @mousedown="hanldeMetronomeMinmousedown"
     v-if="metronomeShow || windowMet"
-    v-show="!metronomeShow"
   >
     <div class="topMetronomeMin">
       <img
@@ -14,7 +13,9 @@
         :style="{
           '--rotateWagTime': rotateWagTime + 's'
         }"
-        :class="{ playWagAnimation: playState === 'play' }"
+        :class="[
+          playState === 'play' && 'playWagAnimation' + beatSymbolOpt[beatSymbol]
+        ]"
         src="./imgs/zhen.png"
       />
       <img class="bai" src="./imgs/bai.png" />
@@ -71,7 +72,6 @@
         ref="metronomeDom"
         @closeMet="handleCloseMet"
         @windowMet="handleWindowMet"
-        @speedNumChange="handleSpeedNumChange"
         @playStateChange="handlePlayStateChange"
       ></Metronome>
     </div>
@@ -112,12 +112,25 @@ watch(metronomeShow, () => {
 });
 const playState = ref<'play' | 'pause'>('pause');
 function handlePlayStateChange(state: 'play' | 'pause') {
+  if (state === 'play') {
+    rotateWagTime.value = parseFloat(
+      (60 / metronomeDom.value!.speedNum).toFixed(4)
+    );
+    beatSymbol.value = metronomeDom.value!.beatSymbol;
+  }
   playState.value = state;
 }
-const rotateWagTime = ref((60 * 2) / 90);
-function handleSpeedNumChange(num: number) {
-  rotateWagTime.value = parseFloat(((60 * 2) / num).toFixed(4));
-}
+const beatSymbol = ref('1');
+const beatSymbolOpt = {
+  '1': '1',
+  '0.5-0.5': '2',
+  '0.3333333-0.3333333-0.3333333': '3',
+  '0.25-0.25-0.25-0.25': '4',
+  '0.6666666-0.3333333': '5',
+  '0.75-0.25': '6',
+  '0.5-0.25-0.25': '7'
+};
+const rotateWagTime = ref(60 / 90);
 onMounted(() => {
   document.addEventListener('visibilitychange', documentHidePause);
 });
@@ -198,6 +211,9 @@ function hanldeMetronomeMinmousedown() {
   align-items: center;
   z-index: 10;
   height: 81Px;
+  &.metronomeMinConHide {
+    visibility: hidden;
+  }
   .topMetronomeMin {
     position: relative;
     display: flex;
@@ -214,21 +230,117 @@ function hanldeMetronomeMinmousedown() {
       left: 50%;
       transform: translateX(-50%);
       transform-origin: 50% 100%;
-      &.playWagAnimation {
-        animation: rotateWag var(--rotateWagTime) linear infinite;
+      &.playWagAnimation1 {
+        animation: rotateWag1 var(--rotateWagTime) linear infinite alternate;
+      }
+      @keyframes rotateWag1 {
+        0% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        100% {
+          transform: translateX(-50%) rotate(90deg);
+        }
+      }
+      &.playWagAnimation2 {
+        animation: rotateWag2 var(--rotateWagTime) linear infinite;
+      }
+      @keyframes rotateWag2 {
+        0% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        50% {
+          transform: translateX(-50%) rotate(90deg);
+        }
+        100% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+      }
+      &.playWagAnimation3 {
+        animation: rotateWag3 var(--rotateWagTime) linear infinite alternate;
+      }
+      @keyframes rotateWag3 {
+        0% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        33.33% {
+          transform: translateX(-50%) rotate(90deg);
+        }
+        66.66% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        100% {
+          transform: translateX(-50%) rotate(90deg);
+        }
+      }
+      &.playWagAnimation4 {
+        animation: rotateWag4 var(--rotateWagTime) linear infinite;
+      }
+      @keyframes rotateWag4 {
+        0% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        25% {
+          transform: translateX(-50%) rotate(90deg);
+        }
+        50% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        75% {
+          transform: translateX(-50%) rotate(90deg);
+        }
+        100% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+      }
+      &.playWagAnimation5 {
+        animation: rotateWag5 var(--rotateWagTime) linear infinite;
       }
-      @keyframes rotateWag {
+      @keyframes rotateWag5 {
+        0% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        66.66% {
+          transform: translateX(-50%) rotate(90deg);
+        }
+        100% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+      }
+      &.playWagAnimation6 {
+        animation: rotateWag6 var(--rotateWagTime) linear infinite;
+      }
+      @keyframes rotateWag6 {
+        0% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        75% {
+          transform: translateX(-50%) rotate(90deg);
+        }
+        100% {
+          transform: translateX(-50%) rotate(-90deg);
+        }
+      }
+      &.playWagAnimation7 {
+        animation: rotateWag7 calc(var(--rotateWagTime) * 2) linear infinite;
+      }
+      @keyframes rotateWag7 {
         0% {
           transform: translateX(-50%) rotate(-90deg);
         }
         25% {
-          transform: translateX(-50%) rotate(0deg);
+          transform: translateX(-50%) rotate(90deg);
+        }
+        37.5% {
+          transform: translateX(-50%) rotate(-90deg);
         }
         50% {
           transform: translateX(-50%) rotate(90deg);
         }
         75% {
-          transform: translateX(-50%) rotate(0deg);
+          transform: translateX(-50%) rotate(-90deg);
+        }
+        87.5% {
+          transform: translateX(-50%) rotate(90deg);
         }
         100% {
           transform: translateX(-50%) rotate(-90deg);