干燥机配套车间生产管理系统/云平台前端
1
bsw215583320
2025-03-26 ddf24b26ea76a43e3852dde31b6faa813b2cf99a
src/views/dry/bigScreen/BigWorkShop.vue
@@ -19,78 +19,53 @@
                  <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"> 26 ℃ </div>
                     <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"> 53 %rh </div>
                     <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="display: flex; flex-wrap: wrap; justify-content: space-between;">
                        <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                  <div style="width: 700px; 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">
                           <div class="statistics putincolor">
                              <div class="stat_label font16">
                                 总投料量
                              </div>
                              <div class="stat_label font16"> 总投料量 </div>
                              <div class="stat_value">
                                 5066
                                 <span class="font16">
                                 Kg
                              </span>
                              </div>
                                 {{ originWeight?.toFixed(2) || 0 }}
                                 <span class="font16"> Kg </span>
                              </div>
                              <div class="stat_avg">
                                 <div>
                                    预计产量
                                 </div>
                                 <div>
                                    2321kg
                                 </div>
                                 <div> 预计产量 </div>
                                 <div> {{ totalYield?.toFixed(2) || 0 }} kg </div>
                              </div>
                           </div>
                        </dv-border-box7>
                        <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                        <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                           <div class="statistics putincolor">
                              <div class="stat_label font16">
                                 电量消耗
                              </div>
                              <div class="stat_label font16"> 电量消耗 </div>
                              <div class="stat_value">
                                 462
                                 <span class="font16">
                                    Kwh
                              </span>
                              </div>
                                 {{ watt?.toFixed(2) || 0 }}
                                 <span class="font16"> Kwh </span>
                              </div>
                              <div class="stat_avg">
                                 <div>
                                    平均电耗
                                 </div>
                                 <div>
                                    13 Kwh/kg
                                 </div>
                                 <div> 平均电耗 </div>
                                 <div> {{wattAvg?.toFixed(2) || 0}} Kwh/kg </div>
                              </div>
                           </div>
                        </dv-border-box7>
                        <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                        <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                           <div class="statistics putincolor">
                              <div class="stat_label font16">
                                 蒸汽消耗
                              </div>
                              <div class="stat_label font16"> 蒸汽消耗 </div>
                              <div class="stat_value">
                                 683
                                 <span class="font16">
                                    m³
                              </span>
                              </div>
                                 {{ steam?.toFixed(2) || 0 }}
                                 <span class="font16"> m³ </span>
                              </div>
                              <div class="stat_avg">
                                 <div>
                                    平均汽耗
                                 </div>
                                 <div>
                                    23 m³
                                 </div>
                                 <div> 平均汽耗 </div>
                                 <div> {{steamAvg?.toFixed(2) || 0}} m³/kg </div>
                              </div>
                           </div>
                        </dv-border-box7>
@@ -104,9 +79,9 @@
                           </div>
                        </div> -->
                     </div>
                     <div>
                     <!-- <div class="statistics electroncolor">
                        <!-- <div class="statistics electroncolor">
                        <div class="stat_label font16">电量消耗</div>
                        <div class="stat_value">500</div>
                        <div class="font16">
@@ -144,8 +119,6 @@
                        
                     </div> -->
                     </div>
                  </div>
                  <!-- <div style="padding-right: 100px;">
                     <div class="statistics">
@@ -158,8 +131,6 @@
                     
                     </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 }">
@@ -182,14 +153,17 @@
                              :show-info="false"
                           />
                           <div class="eqp-timer">
                              <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                 {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture.toFixed(1) || '0' }} %
                              <div
                                 ><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                 {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture?.toFixed(1) || '0' }} %
                              </div>
                              <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                  {{realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} ℃
                              <div
                                 ><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                 {{ realTime.get(eqpCodes[num - 1])?.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])?.totalRemain||0}} min
                              <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>
@@ -198,13 +172,14 @@
                              <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                              
                           </div> -->
                        </div>
                        <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> -->
                        <div class="weight"><div class="herb">
                           {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
                        </div></div>
                        <div class="weight"
                           ><div class="herb">
                              {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
                           </div></div
                        >
                        <div class="water">
                           <div class="eqp_num">{{ num }}</div>
                           <!-- <div class="temp">
@@ -230,7 +205,9 @@
                           <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="weight"><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div>
                        <div class="weight"
                           ><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div
                        >
                        <div class="water">
                           <div class="eqp_num">{{ num + 4 }}</div>
                           <!-- <div class="temp">
@@ -255,7 +232,7 @@
                              <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div>
                              <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
                           </div>
                           <Progress
                              :stroke-color="{
                                 from: '#108ee9',
@@ -268,27 +245,30 @@
                           />
                           <!-- <div class="eqp-name">50%</div> -->
                           <div class="eqp-timer">
                              <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                 {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture.toFixed(1) || '0' }} %
                              <div
                                 ><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                 {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture?.toFixed(1) || '0' }} %
                              </div>
                              <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                  {{realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} ℃
                              <div
                                 ><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                 {{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} ℃
                              </div>
                              <!-- <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
                                 ><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>
               </div>
               <div class="footer">
                  <div >{{ nowDate }}</div>
                  <div >{{ nowTime }}</div>
                  <div>{{ nowDate }}</div>
                  <div>{{ nowTime }}</div>
               </div>
            </div>
         </div>
@@ -309,26 +289,34 @@
   const eqpMap = ref(new Map())
   const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008'])
   const eqps = ref([] as dryEquipment[])
   const title = ref("兰浦智能干燥车间")
   const title = ref('智能干燥车间')
   const userStore = useUserStore()
   console.log(userStore.dictItems.title)
   userStore.dictItems.title?.forEach(element => {
      if (element.value === "bigscreentitle") {
   const envHum = ref(0)
   const envTemp = ref(0)
   const originWeight = ref(0)
   const totalYield = ref(0)
   const dryReduce = ref(0)
   const steam = ref(0)
   const watt = ref(0)
   const steamAvg = ref(0)
   const wattAvg = ref(0)
   // console.log(userStore.dictItems.title)
   userStore.dictItems.title?.forEach((element) => {
      if (element.value === 'bigscreentitle') {
         title.value = element.text
      }
   });
   })
   const Timer = ref()
   const realTime = ref(new Map())
   const nowTime = ref()
   const nowDate = ref()
   function listAllEqp() {
      listAll({ enable: 'Y' })
         .then((result) => {
            console.log(`output->result`, result)
            // (`output->result`, result)
            eqps.value = result
            result.forEach((item) => {
@@ -337,35 +325,54 @@
            updateRealTime()
         })
         .catch((err) => {
            console.log(`output->err`, err)
            // console.log(`output->err`, err)
         })
   }
   function updateRealTime() {
      //console.log(`output->定时刷新数据`)
      queryWorkShopStatistics()
      eqps.value.forEach((item) => {
         queryRealTime(item)
          queryRealTime(item)
      })
   }
   function queryWorkShopStatistics() {
      let tenantId = userStore.getTenant
      defHttp.get({ url: '/dry/real/workshopStatistics', params: { tenantid: tenantId } }).then((res) => {
         // console.log(`output->res`, res)
         steam.value = res.steam
         watt.value = res.watt
         envHum.value = res.envHum
         envTemp.value = res.envTemp
         originWeight.value = res.originWeight
         totalYield.value = res.yield
         dryReduce.value = res.reduce
         if(res.reduce > 0) {
            steamAvg.value = res.steam/res.reduce
            wattAvg.value = res.watt/res.reduce
         }
      })
   }
   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.totalRemain = res.remain
            if (res.detailList) {
               // 干燥剩余时间=工单预计剩余-(当前干燥时间-最后一次记录干燥时间)
               res.totalRemain = res.remain-(res.dryTime-res.detailList[res.detailList.length - 1].totalTime)
               // 干燥剩余时间=工单预计剩余-(当前干燥时间-最后一次记录干燥时间)
               res.totalRemain = res.remain - (res.dryTime - res.detailList[res.detailList.length - 1].totalTime)
            }
            if(res.totalRemain < 0) {
            if (res.totalRemain < 0) {
               res.totalRemain = 0
            }
            res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
         } else {
            res = {
@@ -379,7 +386,7 @@
      })
   }
   function gotoeqp(num) {
      console.log('跳转机台',num);
      //console.log('跳转机台', num)
      if (num < eqpCodes.value.length) {
         router.push({ path: '/bigEqp', query: { num: num } })
      }
@@ -387,20 +394,45 @@
   function getNowTime() {
      var date = new Date()
      nowDate.value = (date.getFullYear()) + "/" + (date.getMonth()< 9? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "/" + (date.getDay() < 10? "0" + date.getDay() : date.getDay())
      nowTime.value = "" + (date.getHours()<10? "0" + date.getHours() :  date.getHours())  + ":" + (date.getMinutes()< 10? "0" + date.getMinutes(): date.getMinutes())
      //console.log("获取当前时间!");
      nowDate.value =
         date.getFullYear() +
         '/' +
         (date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) +
         '/' +
         (date.getDay() < 10 ? '0' + date.getDay() : date.getDay())
      nowTime.value =
         '' +
         (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) +
         ':' +
         (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
   }
   function showInfo(data) {
      return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'空闲':'空闲'
      return data ? (data.fault ? data.fault : data.warning ? data.warning : data.orderStatus ? covertStatus(data.orderStatus+'') : '空闲') : '空闲'
   }
  function covertStatus(status){
    //console.log('status',status)
    switch (status) {
      case '0':
        return '准备阶段'
      case '1':
        return '上料阶段'
      case '2':
        return '干燥阶段'
      case '3':
        return '暂停'
      case '4':
        return '干燥完成'
    }
  }
  console.log("router-param", router.currentRoute.value.params.tenant);
   getNowTime()
   listAllEqp()
   onMounted(() => {
      Timer.value = setInterval(updateRealTime, 3000)
      setInterval(getNowTime,10000)
      setInterval(getNowTime, 10000)
   })
   onUnmounted(() => {
@@ -512,11 +544,11 @@
   }
   .eqp-title {
       height: 125px;
      height: 125px;
    width: 100%;
    padding: 10px 20px;
      width: 100%;
      padding: 10px 20px;
   }
   .eqp-name {
@@ -532,7 +564,7 @@
      color: white;
      margin-top: 6px;
      justify-content: space-between;
    display: flex;
      display: flex;
   }
   .eqp-name-down {
@@ -579,7 +611,7 @@
      width: 110px;
      margin-left: 200px;
      display: flex;
      flex-wrap: wrap;
      flex-wrap: wrap;
   }
   .temp {
@@ -588,7 +620,6 @@
   .font {
      line-height: 26px;
   }
   .footer {
      height: 160px;
@@ -600,7 +631,6 @@
      color: white;
      line-height: 40px;
      margin-top: -150px;
   }
   :deep() .progress {
      padding: 25px 25px;
@@ -620,14 +650,13 @@
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
   }
   .stat_label {
      width:45px
      width: 45px;
   }
   .stat_value {
      font-size: 32px
      font-size: 28px;
   }
   .herb_weight {
@@ -638,16 +667,16 @@
   }
   .eqp_num {
      font-weight: bold;
    width: 40px;
    height: 40px;
    background: #a0782e;
    border-radius: 50px;
    /* text-align: center; */
    font-size: 23px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
      width: 40px;
      height: 40px;
      background: #a0782e;
      border-radius: 50px;
      /* text-align: center; */
      font-size: 23px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .putincolor {
@@ -659,13 +688,18 @@
   }
   .steamcolor {
      color: sandybrown
      color: sandybrown;
   }
   .font16 {
      font-size: 16px;
   }
   .stat_avg {
      width: 100%; font-size: 16px; display: flex; color: rgb(176, 176, 176); justify-content: space-between; border-top: 1px solid;
      width: 100%;
      font-size: 16px;
      display: flex;
      color: rgb(176, 176, 176);
      justify-content: space-between;
      border-top: 1px solid;
      margin-top: 6px;
   }
</style>