feat(bigScreen): 添加键盘控制功能并优化界面显示

baoshiwei

4 天以前 938348fc70fe2f2332793c7e9d66acf07691936a

 src/views/dry/bigScreen/BigWorkShop-tjt.vue

@@ -181,7 +181,9 @@
                           </div></div
                        >
                        <div class="water">
                           <div :class="{ eqp_num: 1 == 1, eqp_num_two: num === 2, eqp_num_three: num === 3, eqp_num_four: num === 4 }">{{ num + (num == 3) * 1 + (num == 4) * 2 }}</div>
                           <div :class="{ eqp_num: 1 == 1, eqp_num_two: num === 2, eqp_num_three: num === 3, eqp_num_four: num === 4 }">{{
                              num + (num == 3) * 1 + (num == 4) * 2
                           }}</div>
                           <!-- <div class="temp">
                              <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div>
                              <div class="font">
@@ -209,7 +211,9 @@
                           ><div class="herb">{{ showInfo(realTime.get(eqpCodes[num - 2 * num + 3 * num])) }}</div></div
                        >
                        <div class="water">
                           <div :class="{eqp_num:1==1, eqp_num_down_one: num === 1, eqp_num_down_two: num === 2, eqp_num_down_three: num === 3}">{{ num - 2 * num + 3 * num + 1 }}</div>
                           <div :class="{ eqp_num: 1 == 1, eqp_num_down_one: num === 1, eqp_num_down_two: num === 2, eqp_num_down_three: num === 3 }">{{
                              num - 2 * num + 3 * num + 1
                           }}</div>
                           <!-- <div class="temp">
                              <div style="line-height: 28px">
                                 <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" />
@@ -397,6 +401,7 @@
   }
   function gotoeqp(num) {
      console.log('跳转机台', num)
    console.log('跳转机台', eqpCodes.value)
      if (num < eqpCodes.value.length) {
         router.push({ path: '/bigEqp', query: { num: num } })
      }
@@ -421,14 +426,32 @@
      return data ? (data.fault ? data.fault : data.warning ? data.warning : data.level ? data.level : '空闲') : '空闲'
   }

   function handleKeyDown(event) {
    // 阻止默认行为
    event.preventDefault()
    console.log('handleKeyDown', event.key)
      if (event.key === 'Tab') {
         // 监听到右箭头键按下时，执行跳转逻辑
         gotoeqp(0)
         // eqpNum.value++
         // if (eqpNum.value > eqpCodes.value.length) {
         //    eqpNum.value = 1
         // }
      }
   }

   getNowTime()
   listAllEqp()
   onMounted(() => {
      // 添加键盘事件监听器
      window.addEventListener('keydown', handleKeyDown)
      Timer.value = setInterval(updateRealTime, 3000)
      setInterval(getNowTime, 10000)
   })

   onUnmounted(() => {
      // 移除键盘事件监听器
      window.removeEventListener('keydown', handleKeyDown)
      clearInterval(Timer.value)
      Timer.value = null
   })
@@ -720,15 +743,23 @@
      margin-top: 6px;
   }
  @keyframes flowLight {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
      0% {
         background-position: 200% 0;
      }
      100% {
         background-position: -200% 0;
      }
  }
  @keyframes flowLightUp {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
      0% {
         background-position: -200% 0;
      }
      100% {
         background-position: 200% 0;
      }
  }
   .up .eqp-title::after {
    content: "";
      content: '';
    position: absolute;
    left: 90px;
    top: 34%;
@@ -739,11 +770,10 @@

    background-size: 200% 100%;
    animation: flowLightUp 10s infinite linear;

   }

  .down .eqp-title::after {
    content: "";
      content: '';
    position: absolute;
    left: 99px;
    top: 59%;
@@ -754,5 +784,4 @@
    background-size: 200% 100%;
    animation: flowLight 15s infinite linear;
  }

</style>