机台监控和车间大屏优化

baoshiwei

2023-11-07 e90b860aaa30bb3e5486618b447589eee75ff6ec

 src/views/dry/bigScreen/BigWorkShop.vue

@@ -6,7 +6,7 @@
               <div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div>

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

                  <dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" />
               </div>
@@ -27,11 +27,149 @@
                     <div style="font-size: 20px; line-height: 26px"> 53 %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 class="statistics putincolor">
                              <div class="stat_label font16">
                                 总投料量
                              </div>
                              <div class="stat_value">
                                 5066 
                                 <span class="font16">
                                 Kg
                              </span>
                              </div> 
                              <div class="stat_avg">
                                 <div>
                                    预计产量
                                 </div>	
                                 <div>
                                    2321kg
                                 </div> 
                              </div>
                           </div>
                        </dv-border-box7>
                        <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                           <div class="statistics putincolor">
                              <div class="stat_label font16">
                                 电量消耗
                              </div>
                              <div class="stat_value">
                                 462 
                                 <span class="font16">
                                    Kwh
                              </span>
                              </div> 
                              <div class="stat_avg">
                                 <div>
                                    平均电耗
                                 </div>	
                                 <div>
                                    13 Kwh/kg
                                 </div> 
                              </div>
                           </div>
                        </dv-border-box7>
                        <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                           <div class="statistics putincolor">
                              <div class="stat_label font16">
                                 蒸汽消耗
                              </div>
                              <div class="stat_value">
                                 683 
                                 <span class="font16">
                                    m³
                              </span>
                              </div> 
                              <div class="stat_avg">
                                 <div>
                                    平均汽耗
                                 </div>	
                                 <div>
                                    23 m³
                                 </div> 
                              </div>
                           </div>
                        </dv-border-box7>
                        <!-- <div class="statistics putincolor">
                           <div class="stat_label font16">预计产量</div>
                           <div class="stat_value">3000</div>
									
                           <div class="font16">
                              <br/>
                              Kg
                           </div>
                        </div> -->
                     </div>
							
                     <div>
                     <!-- <div class="statistics electroncolor">
                        <div class="stat_label font16">电量消耗</div>
                        <div class="stat_value">500</div>
                        <div class="font16">
                           <br/>
                            Kwh
                        </div>
								 
                     </div>
                     <div class="statistics steamcolor">
                        <div class="stat_label font16">蒸汽消耗</div>
                        <div class="stat_value">300</div>
                        <div class="font16">
                           <br/>
                           m³
                        </div>
								 
                     </div>
						
                     <div class="statistics electroncolor">
                        <div class="stat_label font16">平均电耗</div>
                        <div class="stat_value">12</div>
                        <div class="font16">
                           <br/>
                           Kwh/kg
                        </div>
								 
                     </div>
                     <div class="statistics steamcolor">
                        <div class="stat_label font16">平均汽耗</div>
                        <div class="stat_value">300</div>
                        <div class="font16">
                           <br/>
                           m³/kg
                        </div>
								
                     </div> -->
                     </div>
						
							
                  </div>
                  <!-- <div style="padding-right: 100px;">
                     <div class="statistics">
                        <div class="stat_label font16">干料产量</div>
                        <div class="stat_value">300</div>
                        <div class="font16">
                           <br/>
                           kg
                        </div>
							
                     </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="herb_weight">
                              <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                              <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div>
                           </div>
                           <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '预留' }}</div> -->
                           <!-- <div class="process"> </div> -->
                           <Progress
                              :stroke-color="{
@@ -44,8 +182,11 @@
                              :show-info="false"
                           />
                           <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><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>
                              <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> 
                                 {{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min
@@ -53,15 +194,20 @@
                           </div>
                        </div>
                        <div class="eqp-info-up">
                           <div class="herb">
                           <!-- <div class="herb">
                              <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                              <!-- <div>33 Kg</div> -->
                           </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">{{ 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="water">
                           <div class="temp">
                           <div class="eqp_num">{{ num }}</div>
                           <!-- <div class="temp">
                              <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> %
@@ -72,7 +218,7 @@
                              <div class="font">
                                 <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> ℃
                              </div>
                           </div>
                           </div> -->
                        </div>
                     </div>
                  </div>
@@ -80,12 +226,14 @@
               <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="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="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="water">
                           <div class="temp">
                           <div class="eqp_num">{{ num + 4 }}</div>
                           <!-- <div class="temp">
                              <div style="line-height: 28px">
                                 <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" />
                              </div>
@@ -98,12 +246,15 @@
                              <div class="font">
                                 <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> ℃
                              </div>
                           </div>
                           </div> -->
                        </div>

                        <div style="height: 50px"></div>
                        <div style="height: 40px"></div>
                        <div class="eqp-title">
                           <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '预留' }}</div>
                           <div class="herb_weight">
                              <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div>
                              <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
                           </div>
                           
                           <Progress
                              :stroke-color="{
@@ -117,9 +268,15 @@
                           />
                           <!-- <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 + 3])?.dryTime || 0}} min
                              <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>
                              <!-- <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>
@@ -130,7 +287,7 @@
               </div>
               <div class="footer">
                  
                  <div >{{ nowDate }}</div>
                  <div >{{ nowDate }}</div> 
                  <div >{{ nowTime }}</div>
               </div>
            </div>
@@ -152,8 +309,15 @@
   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 userStore = useUserStore()
   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())
@@ -164,7 +328,7 @@
   function listAllEqp() {
      listAll({ enable: 'Y' })
         .then((result) => {
            //console.log(`output->result`, result)
            console.log(`output->result`, result)
            eqps.value = result

            result.forEach((item) => {
@@ -185,6 +349,7 @@
   }

   function queryRealTime(eqp: dryEquipment) {
		
      let tenantId = userStore.getTenant
      let eqpCode = eqp.code
      let queryRealTimeUrl = '/dry/real/getRealTimeData'
@@ -214,6 +379,7 @@
      })
   }
   function gotoeqp(num) {
      console.log('跳转机台',num);
      if (num < eqpCodes.value.length) {
         router.push({ path: '/bigEqp', query: { num: num } })
      }
@@ -224,6 +390,10 @@
      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("获取当前时间！");
   }

   function showInfo(data) {
      return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'空闲':'空闲'
   }

   getNowTime()
@@ -252,7 +422,7 @@
      background-image: url(/src/assets/images/dry/bg/wksp2.png);
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 0% 50%;
      background-position: 0px 50px;
   }

   .head {
@@ -283,8 +453,16 @@
      display: flex;
   }

   .feed {
      display: flex;
      height: 0px;
      color: gray;
      padding-top: 20px;
      justify-content: space-between;
   }

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

@@ -292,36 +470,37 @@
      justify-content: flex-start;
   }
   .down {
      padding-left: 392px;
      margin-top: -334px;
      padding-left: 402px;
      margin-top: -367px;
      display: flex;

      align-content: center;
      justify-content: flex-start;
   }
   .eqpInfoup {
      width: 280px;
      height: 315px;
      margin: -20px 41px;
      width: 300px;
      height: 400px;
      margin: -50px 31px;
      display: flex;
      flex-direction: column;
   }

   .eqpInfodown {
      width: 280px;
      height: 315px;
      margin: 0 41px;
      width: 300px;
      height: 430px;
      margin: 0 31px;
      padding-top: 132px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
   }

   .one {
      margin-top: 280px;
      margin-top: 278px;
   }

   .two {
      margin-top: 220px;
      margin-top: 219px;
   }

   .three {
@@ -329,15 +508,15 @@
   }

   .four {
      margin-top: 100px;
      margin-top: 101px;
   }

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

    width: 100%;
   
    padding: 10px 20px;
   }

   .eqp-name {
@@ -352,7 +531,7 @@
      text-align: center;
      color: white;
      margin-top: 6px;
      justify-content: space-around;
      justify-content: space-between;
    display: flex;
   }

@@ -372,14 +551,14 @@

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

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

   .eqp-info-down {
@@ -389,7 +568,7 @@
   }

   .herb {
      height: 30px;
      height: 32px;
      background: #3f4c6b;
      color: white;
      line-height: 30px;
@@ -398,10 +577,9 @@
   .water {
      height: 120px;
      width: 110px;
      margin-left: 170px;
      margin-left: 200px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-evenly;
      flex-wrap: wrap; 
   }

   .temp {
@@ -421,6 +599,7 @@
      align-items: flex-end;
      color: white;
      line-height: 40px;
      margin-top: -150px;

   }
   :deep() .progress {
@@ -435,4 +614,58 @@
   :deep() .ant-progress-inner {
      background-color: rgb(197 197 197 / 84%) !important;
   }

   .statistics {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
		
   }
   .stat_label {
      width:45px
   }
 
   .stat_value {
      font-size: 32px
   }

   .herb_weight {
      padding: 0 10px;
      color: white;
      display: flex;
      justify-content: space-between;
   }
   .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;
   }

   .putincolor {
      color: antiquewhite;
   }

   .electroncolor {
      color: aquamarine;
   }

   .steamcolor {
      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;
      margin-top: 6px;
   }
</style>