优化车间大屏和机台大屏

bsw215583320

2023-08-05 5bec62ee89b4beb9d631670fe436fd3de2887317

 src/views/dry/bigScreen/BigWorkShop.vue

@@ -17,12 +17,12 @@
            <div class="body">
               <div class="humiture">
                  <div style="display: flex; width: 120px">
                     <Icon style="color: #f7b733" icon="solar:temperature-line-duotone" :size="28" />
                     <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" />
                     &nbsp;
                     <div style="font-size: 20px; line-height: 26px"> 26 ℃ </div>
                  </div>
                  <div style="display: flex">
                     <Icon style="color: #f7b733" icon="material-symbols:humidity-percentage-outline" :size="28" />
                     <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
                     &nbsp;
                     <div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
                  </div>
@@ -43,22 +43,34 @@
                              trailColor="#2b2b2b2b"
                              :show-info="false"
                           />
                           <!-- <div class="eqp-name">50%</div> -->
                           <div class="eqp-timer">
                              <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
                                  {{realTime.get(eqpCodes[num - 1])?.dryTime || 0}} min
                              </div>
                              <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> 
                                 {{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min
                              </div>
                           </div>
                        </div>
                        <div class="eqp-info-up">
                           <div class="herb">{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                           <div class="herb">
                              <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                              <!-- <div>33 Kg</div> -->
                           </div>
									
                        </div>
                        <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div>
                        <div class="water">
                           <div class="temp">
                              <div style="line-height: 28px"><Icon style="color: #2a5a63" icon="ic:twotone-water-drop" :size="28" /> </div>
                              <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div>
                              <div class="font">
                                 <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo.moisture || '0' }}</span> %
                                 <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture || '0' }}</span> %
                              </div>
                           </div>
                           <div class="temp">
                              <div style="line-height: 28px"><Icon style="color: #6c5b7b" icon="solar:temperature-bold-duotone" :size="30" /> </div>
                              <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
                              <div class="font">
                                 <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo.bellowsTemp || '0' }} </span> ℃
                                 <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> ℃
                              </div>
                           </div>
                        </div>
@@ -71,26 +83,28 @@
                        <div class="eqp-info-down">
                           <div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div>
                        </div>
                        <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div>
                        <div class="water">
                           <div class="temp">
                              <div style="line-height: 28px">
                                 <Icon style="color: #2a5a63" icon="ic:twotone-water-drop" :size="28" />
                                 <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" />
                              </div>
                              <div class="font">
                                 <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo.moisture || '0' }}</span> %
                                 <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture || '0' }}</span> %
                              </div>
                           </div>
                           <div class="temp">
                              <div style="line-height: 28px"><Icon style="color: #6c5b7b" icon="solar:temperature-bold-duotone" :size="30" /> </div>
                              <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
                              <div class="font">
                                 <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo.bellowsTemp || '0' }}</span> ℃
                                 <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> ℃
                              </div>
                           </div>
                        </div>

                        <div style="height: 70px"></div>
                        <div style="height: 50px"></div>
                        <div class="eqp-title">
                           <!-- <div class="process"> </div> -->
                           <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '预留' }}</div>
									
                           <Progress
                              :stroke-color="{
                                 from: '#108ee9',
@@ -102,7 +116,14 @@
                              :show-info="false"
                           />
                           <!-- <div class="eqp-name">50%</div> -->
                           <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '预留' }}</div>
                           <div class="eqp-timer">
                              <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
                                  {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min
                              </div>
                              <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> 
                                 {{ realTime.get(eqpCodes[num + 3])?.totalRemain||0}} min
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
@@ -124,7 +145,7 @@
   import { useUserStore } from '/@/store/modules/user'
   const eqpNum = ref(4)
   const eqpMap = ref(new Map())
   const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006'])
   const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008'])
   const eqps = ref([] as dryEquipment[])

   const userStore = useUserStore()
@@ -163,7 +184,16 @@
         //console.log(`output->res`, res)
         if (res && res.trendVo) {
            res.tempValue = [res.windTemp, 100]
            res.percent = ((res.dryTime / (res.dryTime + res.remain)) * 100).toFixed(2)
            res.totalRemain = res.remain
            if (res.detailList) {
               // 干燥剩余时间=工单预计剩余-（当前干燥时间-最后一次记录干燥时间） 
               res.totalRemain = res.remain-(res.dryTime-res.detailList[res.detailList.length - 1].totalTime)
            }
            if(res.totalRemain < 0) {
               res.totalRemain = 0
            }
				
            res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
         } else {
            res = {
               tempValue: [0, 100],
@@ -254,15 +284,15 @@
   }
   .eqpInfoup {
      width: 280px;
      height: 300px;
      margin: 0 41px;
      height: 315px;
      margin: -20px 41px;
      display: flex;
      flex-direction: column;
   }

   .eqpInfodown {
      width: 280px;
      height: 300px;
      height: 315px;
      margin: 0 41px;
      display: flex;
      flex-direction: column;
@@ -286,7 +316,7 @@
   }

   .eqp-title {
      height: 30px;
      height: 45px;
      border-radius: 20px;
      /* background: rgb(182, 182, 182);
      border: 1px solid green; */
@@ -298,6 +328,15 @@
      text-align: center;
      color: white;
      margin-top: -30px;
   }

   .eqp-timer {
      line-height: 30px;
      text-align: center;
      color: white;
      margin-top: 6px;
      justify-content: space-around;
    display: flex;
   }

   .eqp-name-down {
@@ -320,9 +359,15 @@
      display: flex;
   }

   .weight {
      flex: 1;
      display: flex;
      font-size: 16px;
   }

   .eqp-info-down {
      flex: 1;
      padding-top: 50px;
      padding-top: 70px;
      display: flex;
   }

@@ -361,6 +406,6 @@
      height: 25px !important;
   }
   :deep() .ant-progress-inner {
      background-color: rgb(197 197 197 / 52%) !important;
      background-color: rgb(197 197 197 / 84%) !important;
   }
</style>