完成车间大屏

baoshiwei

2023-08-01 3efe2606474fba1905fa4edab82b713b9cfb5ef3

 src/views/dry/bigScreen/BigWorkShop.vue

@@ -1,14 +1,366 @@
<template>
  <dv-full-screen-container>
     
  </dv-full-screen-container>
   <dv-full-screen-container>
      <div class="fbg">
         <div class="bgImage">
            <div class="head">
               <div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div>

               <div class="title">
                  <span>兰浦智能干燥车间</span>

                  <dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" />
               </div>
               <div style="width: 600px; height: 50px; display: flex; justify-content: end">
                  <dv-decoration-8 :reverse="true" style="width: 500px; height: 50px"
               /></div>
            </div>
            <div class="body">
               <div class="humiture">
                  <div style="display: flex; width: 120px">
                     <Icon style="color: #f7b733" icon="solar:temperature-line-duotone" :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" />
                     &nbsp;
                     <div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
                  </div>
               </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)">
                        <div class="eqp-title">
                           <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '预留' }}</div>
                           <!-- <div class="process"> </div> -->
                           <Progress
                              :stroke-color="{
                                 from: '#108ee9',
                                 to: '#87d068',
                              }"
                              :percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')"
                              status="active"
                              trailColor="#2b2b2b2b"
                              :show-info="false"
                           />
                           <!-- <div class="eqp-name">50%</div> -->
                        </div>
                        <div class="eqp-info-up">
                           <div class="herb">{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</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 class="font">
                                 <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 class="font">
                                 <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo.bellowsTemp || '0' }} </span> ℃
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="down">
                  <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
                     <div class="eqpInfodown" @click="gotoeqp(num + 3)">
                        <div class="eqp-info-down">
                           <div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</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 class="font">
                                 <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 class="font">
                                 <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo.bellowsTemp || '0' }}</span> ℃
                              </div>
                           </div>
                        </div>

                        <div style="height: 70px"></div>
                        <div class="eqp-title">
                           <!-- <div class="process"> </div> -->
                           <Progress
                              :stroke-color="{
                                 from: '#108ee9',
                                 to: '#87d068',
                              }"
                              :percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')"
                              status="active"
                              trailColor="#2b2b2b2b"
                              :show-info="false"
                           />
                           <!-- <div class="eqp-name">50%</div> -->
                           <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '预留' }}</div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </dv-full-screen-container>
</template>

<script setup lang="ts">
   import { Progress } from 'ant-design-vue'
   import { onMounted, ref, onUnmounted } from 'vue'
   import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
   import { listAll } from '../api/DryEquipment.api'
   import { dryEquipment } from '../dataDefine/DryEquipment.data'
   import { router } from '/@/router'
   import { defHttp } from '/@/utils/http/axios'
   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 eqps = ref([] as dryEquipment[])

   const userStore = useUserStore()
   const Timer = ref()

   const realTime = ref(new Map())

   function listAllEqp() {
      listAll({ enable: 'Y' })
         .then((result) => {
            //console.log(`output->result`, result)
            eqps.value = result

            result.forEach((item) => {
               eqpMap.value.set(item.code, item)
            })
            updateRealTime()
         })
         .catch((err) => {
            console.log(`output->err`, err)
         })
   }

   function updateRealTime() {
      //console.log(`output->定时刷新数据`)
      eqps.value.forEach((item) => {
         queryRealTime(item)
      })
   }

   function queryRealTime(eqp: dryEquipment) {
      let tenantId = userStore.getTenant
      let eqpCode = eqp.code
      let queryRealTimeUrl = '/dry/real/getRealTimeData'
      defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
         //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)
         } else {
            res = {
               tempValue: [0, 100],
               percent: 0,
               mois: [],
            }
         }

         realTime.value.set(eqp.code, res)
      })
   }
   function gotoeqp(num) {
      if (num < eqpCodes.value.length) {
         router.push({ path: '/bigEqp', query: { num: num } })
      }
   }

   listAllEqp()
   onMounted(() => {
      Timer.value = setInterval(updateRealTime, 3000)
   })

   onUnmounted(() => {
      clearInterval(Timer.value)
      Timer.value = null
   })
</script>

<style scoped>
   .fbg {
      height: 1080px;
      width: 1920px;
      background-image: url(/src/assets/images/dry/bg/bg5.png);
      background-repeat: no-repeat;
   }
   .bgImage {
      height: 1080px;
      width: 1920px;
      background-image: url(/src/assets/images/dry/bg/wksp2.png);
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 0% 50%;
   }

</style>
   .head {
      display: flex;
      align-content: center;
      justify-content: center;
   }

   .body {
      height: 980px;
      width: 100%;
      margin-top: -100px;
      font-size: 20px;
   }
   .title {
      height: 200px;
      padding: 20px;
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      color: white;
   }

   .humiture {
      height: 0px;
      justify-content: center;
      color: white;
      display: flex;
   }

   .up {
      padding-left: 100px;
      padding-top: 00px;
      display: flex;

      align-content: center;
      justify-content: flex-start;
   }
   .down {
      padding-left: 392px;
      margin-top: -334px;
      display: flex;

      align-content: center;
      justify-content: flex-start;
   }
   .eqpInfoup {
      width: 280px;
      height: 300px;
      margin: 0 41px;
      display: flex;
      flex-direction: column;
   }

   .eqpInfodown {
      width: 280px;
      height: 300px;
      margin: 0 41px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
   }

   .one {
      margin-top: 280px;
   }

   .two {
      margin-top: 220px;
   }

   .three {
      margin-top: 160px;
   }

   .four {
      margin-top: 100px;
   }

   .eqp-title {
      height: 30px;
      border-radius: 20px;
      /* background: rgb(182, 182, 182);
      border: 1px solid green; */
      width: 100%;
   }

   .eqp-name {
      line-height: 30px;
      text-align: center;
      color: white;
      margin-top: -30px;
   }

   .eqp-name-down {
      line-height: 40px;
      text-align: center;
      color: white;
   }

   .process {
      width: 50%;
      height: 100%;
      overflow: hidden;
      border-radius: 20px;
      background: #3f4c6b;
   }

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

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

   .herb {
      height: 30px;
      background: #3f4c6b;
      color: white;
      line-height: 30px;
      padding: 0 10px;
   }
   .water {
      height: 120px;
      width: 110px;
      margin-left: 170px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-evenly;
   }

   .temp {
      display: flex;
   }
   .font {
      line-height: 26px;
   }

   .value {
   }
   :deep() .progress {
      padding: 25px 25px;

      width: 360px;
      display: flex;
   }
   :deep() .ant-progress-bg {
      height: 25px !important;
   }
   :deep() .ant-progress-inner {
      background-color: rgb(197 197 197 / 52%) !important;
   }
</style>