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

baoshiwei

3 天以前 938348fc70fe2f2332793c7e9d66acf07691936a

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

@@ -2190,15 +2190,53 @@
      router.back()
   }


  function handleKeyDown(event) {
    event.preventDefault()
    if (event.key === 'ArrowUp') {
      num--
      if (num < 0) {
        num = eqps.value.length
      }
      if (eqps.value.length > 0) {
        var i = num % eqps.value.length
        //eqp.value = eqps.value[i]
        //  console.log("777",i);
        eqpNum.value = i
        //console.log("888",eqp.value);
        queryRealTime()
        //setTimeout(initCharts, 500)
      }
    } else if (event.key === 'ArrowDown') {
      num++
      if (eqps.value.length > 0) {
        var i = num % eqps.value.length
        //eqp.value = eqps.value[i]
        //  console.log("777",i);
        eqpNum.value = i
        //console.log("888",eqp.value);
        queryRealTime()
        //setTimeout(initCharts, 500)
      }
    } else if (event.key === 'Tab') {
      back();
    }
  }
   listAllEqp()
   //queryEqp()
   // DOM挂载完成后渲染图表
   onMounted(() => {
    // 添加键盘事件监听器
    window.addEventListener('keydown', handleKeyDown)
    // 获取焦点

      Timer.value = setInterval(queryRealTime, 3000)
      Timer2.value = setInterval(moveImage, 50)
   })

   onUnmounted(() => {
    // 移除键盘事件监听器
    window.removeEventListener('keydown', handleKeyDown)
      clearInterval(Timer.value)
      clearInterval(Timer2.value)
      Timer.value = null
@@ -2270,7 +2308,7 @@
      color: white;
   }
   .subhead {
      color: #a19f9c;
      color: #cdcdcd;
      font-size: 16px;
      padding-left: 10px;
   }
@@ -2281,8 +2319,8 @@
      font-size: 16px;
   }
   .subhead2 {
      color: #a19f9c;
      font-size: 10px;
      color: #cdcdcd;
      font-size: 12px;
      padding-left: 0px;
   }
   .zhengqi {
@@ -2439,7 +2477,7 @@
   .herbInfo {
      width: 362px;
      height: 440px;
      color: #727272;
      color: #ffffff;
   }

   .curEqp {
@@ -2455,10 +2493,10 @@
      height: 260px;
      /* background: white;
      border-radius: 10px; */

    opacity: 0.7;
      background-repeat: no-repeat;
      background-size: 200px;
      background-position: 0px 10px;
      background-size: 120px;
      background-position: 14px 10px;
   }
   .tempMoisChart {
      width: 736px;