优化配方维护功能-增加简写首字母自动填充，优化车间大屏和设备大屏界面

baoshiwei

13 小时以前 a3e955e801044d8abc2ec575cdf74a6815b8d963

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

@@ -16,21 +16,21 @@
            </div>
            <div class="body">
               <div class="humiture">
<!--                  <div style="display: flex; width: 120px">-->
<!--                     <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" />-->
<!--                     &nbsp;-->
<!--                     <div style="font-size: 20px; line-height: 26px"> {{ envTemp }} ℃ </div>-->
<!--                  </div>-->
<!--                  <div style="display: flex">-->
<!--                     <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />-->
<!--                     &nbsp;-->
<!--                     <div style="font-size: 20px; line-height: 26px"> {{ envHum }} %rh </div>-->
<!--                  </div>-->
                  <!--                  <div style="display: flex; width: 120px">-->
                  <!--                     <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" />-->
                  <!--                     &nbsp;-->
                  <!--                     <div style="font-size: 20px; line-height: 26px"> {{ envTemp }} ℃ </div>-->
                  <!--                  </div>-->
                  <!--                  <div style="display: flex">-->
                  <!--                     <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />-->
                  <!--                     &nbsp;-->
                  <!--                     <div style="font-size: 20px; line-height: 26px"> {{ envHum }} %rh </div>-->
                  <!--                  </div>-->
               </div>
               <div class="feed">
                  <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between">
                  <div style="width: 800px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between">
                     <div style="display: flex; flex-wrap: wrap; justify-content: space-between">
                        <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                        <dv-border-box7 class="toptip">
                           <div class="statistics putincolor">
                              <div class="stat_label font16"> 总投料量 </div>
                              <div class="stat_value">
@@ -43,7 +43,7 @@
                              </div>
                           </div>
                        </dv-border-box7>
                        <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                        <dv-border-box7 class="toptip">
                           <div class="statistics putincolor">
                              <div class="stat_label font16"> 电量消耗 </div>
                              <div class="stat_value">
@@ -56,7 +56,7 @@
                              </div>
                           </div>
                        </dv-border-box7>
                        <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                        <dv-border-box7 class="toptip">
                           <div class="statistics putincolor">
                              <div class="stat_label font16"> 蒸汽消耗 </div>
                              <div class="stat_value">
@@ -134,11 +134,11 @@
               </div>
               <div class="up">
                  <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
                     <div class="eqpInfoup" @click="gotoeqp(num - 1 + (num == 3) * 1 + (num == 4) * 2 )">
                     <div class="eqpInfoup" @click="gotoeqp(num - 1 + (num == 3) * 1 + (num == 4) * 2)">
                        <div class="eqp-title">
                           <div class="herb_weight">
                              <div>{{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.herbName || '暂无' }}</div>
                              <div>{{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.originWeight || 0 }} Kg</div>
                              <div>{{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])?.herbName || '暂无' }}</div>
                              <div>{{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])?.originWeight || 0 }} Kg</div>
                           </div>
                           <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '预留' }}</div> -->
                           <!-- <div class="process"> </div> -->
@@ -147,7 +147,7 @@
                                 from: '#108ee9',
                                 to: '#87d068',
                              }"
                              :percent="parseFloat(realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.percent || '0')"
                              :percent="parseFloat(realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])?.percent || '0')"
                              status="active"
                              trailColor="#2b2b2b2b"
                              :show-info="false"
@@ -155,15 +155,15 @@
                           <div class="eqp-timer">
                              <div
                                 ><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                 {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.trendVo?.moisture?.toFixed(1) || '0' }} %
                                 {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])?.trendVo?.moisture?.toFixed(1) || '0' }} %
                              </div>
                              <div
                                 ><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                 {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} ℃
                                 {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} ℃
                              </div>
                              <div
                                 ><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
                                 {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.totalRemain || 0 }} min
                                 {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])?.totalRemain || 0 }} min
                              </div>
                           </div>
                        </div>
@@ -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
   })
@@ -440,7 +463,7 @@
      width: 2048px;
      background-image: url(/src/assets/images/dry/bg/bg5.png);
      background-repeat: no-repeat;
    background-size: 100%;
      background-size: 100%;
   }
   .bgImage {
      height: 1080px;
@@ -461,12 +484,12 @@
      height: 980px;
      width: 100%;
      margin-top: -100px;
      font-size: 20px;
      font-size: 24px;
   }
   .title {
      height: 200px;
      padding: 20px;
      font-size: 30px;
      font-size: 36px;
      font-weight: bold;
      text-align: center;
      color: white;
@@ -495,43 +518,43 @@
   }
   .down {
      padding-left: 683px;
      margin-top: -823px;
      margin-top: -730px;
      display: flex;

      align-content: center;
      justify-content: flex-start;
   }
   .eqpInfoup {
      width: 304px;
      width: 340px;
      height: 400px;
    position: relative;
      position: relative;
      display: flex;
      flex-direction: column;
   }

   .eqpInfodown {
      width: 313px;
      width: 340px;
      height: 490px;
    position: relative;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
   }

   .one {
      margin: 310px 52px;
      margin: 280px 45px;
   }

   .two {
      margin: 248px -45px;
      margin: 218px -45px;
   }

   .three {
      margin: 129px 222px;
      margin: 99px 222px;
   }

   .four {
      margin: 3px 4px;
      margin: -27px 4px;
   }

   .four_down {
@@ -543,7 +566,7 @@

      width: 100%;

      padding: 10px 20px;
      padding: 10px 10px;
   }

   .eqp-name {
@@ -578,15 +601,15 @@

   .eqp-info-up {
      flex: 1;
      padding-top: 108px;
      padding-top: 140px;
      display: flex;
   }

   .weight {
      flex: 1;
      display: flex;
      margin-left: 36px;
      font-size: 20px;
      margin-left: 45px;
      font-size: 24px;
   }

   .eqp-info-down {
@@ -621,7 +644,7 @@
      height: 160px;
      display: flex;
      padding: 10px 20px;
      font-size: 30px;
      font-size: 36px;
      flex-direction: column-reverse;
      align-items: flex-end;
      color: white;
@@ -652,7 +675,7 @@
   }

   .stat_value {
      font-size: 28px;
      font-size: 33px;
   }

   .herb_weight {
@@ -668,33 +691,33 @@
      background: #a0782e;
      border-radius: 50px;
      /* text-align: center; */
      font-size: 18px;
      font-size: 22px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
   }
  .eqp_num_two {
    margin-left: -6px;
  }
   .eqp_num_two {
      margin-left: -6px;
   }

  .eqp_num_three {
    margin-left: -7px;
  }
   .eqp_num_three {
      margin-left: -7px;
   }

  .eqp_num_four {
    margin-left: -8px;
  }
   .eqp_num_four {
      margin-left: -8px;
   }

  .eqp_num_down_one {
    margin: -53px -82px;
  }
  .eqp_num_down_two {
    margin: -54px -71px;
  }
  .eqp_num_down_three {
    margin: -55px -85px;
  }
   .eqp_num_down_one {
      margin: -53px -82px;
   }
   .eqp_num_down_two {
      margin: -54px -71px;
   }
   .eqp_num_down_three {
      margin: -55px -85px;
   }

   .putincolor {
      color: antiquewhite;
@@ -708,51 +731,60 @@
      color: sandybrown;
   }
   .font16 {
      font-size: 16px;
      font-size: 20px;
   }
   .stat_avg {
      width: 100%;
      font-size: 16px;
      font-size: 20px;
      display: flex;
      color: rgb(176, 176, 176);
      justify-content: space-between;
      border-top: 1px solid;
      margin-top: 6px;
   }
  @keyframes flowLight {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @keyframes flowLightUp {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
   @keyframes flowLight {
      0% {
         background-position: 200% 0;
      }
      100% {
         background-position: -200% 0;
      }
   }
   @keyframes flowLightUp {
      0% {
         background-position: -200% 0;
      }
      100% {
         background-position: 200% 0;
      }
   }
   .up .eqp-title::after {
    content: "";
    position: absolute;
    left: 90px;
    top: 34%;
    width: 65px;
    height: 6px;
    background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
    transform: rotate(105deg) translateY(-107%);
      content: '';
      position: absolute;
      left: 90px;
      top: 39%;
      width: 65px;
      height: 6px;
      background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
      transform: rotate(105deg) translateY(-107%);

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

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

  .down .eqp-title::after {
    content: "";
    position: absolute;
    left: 99px;
    top: 59%;
    width: 128px;
    height: 6px;
    background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
    transform: rotate(105deg) translateY(-107%);
    background-size: 200% 100%;
    animation: flowLight 15s infinite linear;
   .down .eqp-title::after {
      content: '';
      position: absolute;
      left: 99px;
      top: 59%;
      width: 128px;
      height: 6px;
      background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
      transform: rotate(105deg) translateY(-107%);
      background-size: 200% 100%;
      animation: flowLight 15s infinite linear;
   }
  .toptip {
    width: 250px; height: 120px; padding: 10px;
  }

</style>