完成车间大屏

baoshiwei

2023-08-01 3efe2606474fba1905fa4edab82b713b9cfb5ef3

 src/views/dry/monitor/Eqp.vue

@@ -2,11 +2,9 @@
   <div  class="eqpBox">
      <div class="eqpRow">
         <div class="eqpImage" >
				
            <div class="leftEqp">
               <div style="width: 300px;  ">
               <div style="width: 300px">
               <div class="herbInfo">
						
                     <dv-border-box7 class="curEqp">
                        <div class="eqpName"  @click="changeEqp">
                           <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
@@ -54,7 +52,7 @@
                        <div id="fanFreq" style="width: 220px; height: 200px"></div>
                     </div>
                  </dv-border-box7> -->
                  <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                  <dv-border-box7 class="infoChart" style="margin-left: 0px">
                     <div class="chartTittle">含水率</div>
                     <div class="outDiv" style="padding-top: 20px">
                        <div class="leftData">
@@ -83,7 +81,6 @@
                  </dv-border-box7>
            </div>
               <dv-border-box7  class="leftTop">

                  <div class="leftTop0">
                  <div class="leftTop1">
                     <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
@@ -117,7 +114,8 @@
                     >
                        {{ statusTxt }}
                     </div>
                     <div v-if="realData?.isError"
                        <div
                           v-if="realData?.isError"
                        class="eqpInfoText blingbling"
                        style="
                           position: absolute;
@@ -132,14 +130,16 @@
                     >
                        <div class="outDiv">
                           <div><Icon icon="bx:error" :size="30" /> </div>
                           <div><span> {{realData?.errorMsg}}</span></div>
                              <div
                                 ><span> {{ realData?.errorMsg }}</span></div
                              >
                        </div>
                     </div>
                  </div>
               </div>
               </dv-border-box7>
                  
               <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px;">
               <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px">
                     <div class="chartTittle">风箱温度</div>
                     <div class="outDiv">
                        <div id="bellowsTemp" style="width: 220px; height: 200px">
@@ -177,7 +177,6 @@
            </div>
            <div class="rightInfo">
               <div class="rightTop">
						
                  <dv-border-box7 class="tempMoisChart">
                     <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
                  </dv-border-box7>
@@ -241,7 +240,6 @@
                     </div>
                  </dv-border-box7>

						
                  <dv-border-box7 class="infoChart">
                     <div class="chartTittle"
                        >蒸汽消耗(m³/kg)
@@ -254,7 +252,10 @@
                        <div class="leftData">
                           <div class="center" style="height: 100%">
                              <div class="centerText">
                                 <div class="mainInfo3"><span>{{realData?.steam}}</span>m³ </div>
                                 <div class="mainInfo3"
                                    ><span>{{ realData?.steam }}</span
                                    >m³
                                 </div>
                                 <div class="subhead2">蒸汽用量</div>
                              </div>
                           </div>
@@ -274,8 +275,12 @@
                           <div class="center compareBar">
                              <div class="barTop">{{realData?.zhengqi | 0 }}</div>
                              <div class="barBack">
                                 <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                    :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
                                 <div
                                    class="barDiv"
                                    :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                    :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"
                                 >
                                 </div>
                              </div>
                              <div style="line-height: 18px">
                                 实时
@@ -304,7 +309,10 @@
                        <div class="leftData">
                           <div class="center" style="height: 100%">
                              <div class="centerText">
                                 <div class="mainInfo3"><span>{{realData?.watt}}</span>kWh </div>
                                 <div class="mainInfo3"
                                    ><span>{{ realData?.watt }}</span
                                    >kWh
                                 </div>
                                 <div class="subhead2">电能用量</div>
                              </div>
                           </div>
@@ -324,8 +332,11 @@
                           <div class="center compareBar">
                              <div class="barTop">{{realData?.dian | 0}}</div>
                              <div class="barBack">
                                 <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                    :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
                                 <div
                                    class="barDiv"
                                    :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                    :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"
                                 ></div>
                              </div>
                              <div style="line-height: 18px">
                                 实时
@@ -344,7 +355,7 @@
</template>

<script setup lang="ts">
  import { useFullscreen } from '@vueuse/core';
   import { useFullscreen } from '@vueuse/core'
   import { BorderBox13 as DvBorderBox7 } from '@kjgl77/datav-vue3'
   import { router } from '/@/router'
   import { onMounted, ref, onUnmounted } from 'vue'
@@ -356,10 +367,10 @@
   import { queryById } from '../api/DryEquipment.api'
   import { dryEquipment } from '../dataDefine/DryEquipment.data'
   import { useUserStore } from '/@/store/modules/user'
   const domRef = ref<Nullable<HTMLElement>>(null);
      const { enter, toggle, exit, isFullscreen } = useFullscreen();
   const domRef = ref<Nullable<HTMLElement>>(null)
   const { enter, toggle, exit, isFullscreen } = useFullscreen()

const { toggle: toggleDom } = useFullscreen(domRef);
   const { toggle: toggleDom } = useFullscreen(domRef)
   const Timer = ref()
   const marks = ref<Record<number, any>>({
      0: '0°C',
@@ -513,7 +524,7 @@
            text: '含水率/温度趋势',
            textStyle: {
               //color: '#fff',
               fontSize: 15
               fontSize: 15,
            },
         },
         tooltip: {
@@ -592,13 +603,13 @@
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: 'rgb(128, 255, 165)'
                        color: 'rgb(128, 255, 165)',
                  },
                  {
                     offset: 1,
                     color: 'rgb(1, 191, 236)'
                  }
                  ])
                        color: 'rgb(1, 191, 236)',
                     },
                  ]),
               },
            },
            {
@@ -618,13 +629,13 @@
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: 'rgb(255, 0, 135)'
                        color: 'rgb(255, 0, 135)',
                  },
                  {
                     offset: 1,
                     color: 'rgb(135, 0, 157)'
                  }
                  ])
                        color: 'rgb(135, 0, 157)',
                     },
                  ]),
               },
               // markLine: {
               //    data: [
@@ -1073,7 +1084,6 @@
         },
         legend: {
            right: 60,
				
         },
         xAxis: {
            show: false,
@@ -1132,7 +1142,6 @@
                           ],
                           label: {
                              formatter: '{b}\n{c}',
									
                           },
                        },
               // markLine: {
@@ -1143,22 +1152,19 @@
      }

      const compareOption = {
					
               tooltip: {
                  trigger: 'axis',
					
               },
               grid: {
                  top: '6%',
                  left: '10%',
                  right: '10%',
                  bottom: '3%',
                  containLabel: true
            containLabel: true,
               },
               xAxis: {
                  show: false,
                  type: 'value',
					
               },
               yAxis: {
                  axisLine: {
@@ -1168,7 +1174,7 @@
                     show: false,
                  },
                  type: 'category',
                  data: ['1#', '2#', '3#', '4#', '5#', '6#']
            data: ['1#', '2#', '3#', '4#', '5#', '6#'],
               },
               series: [
                  {
@@ -1181,12 +1187,11 @@
                        position: 'right',
                        valueAnimation: true,
                        
                        color: '#fff' 
                     }
                  color: '#fff',
                  },
               ]
            },
         ],
            }
		

      option && moisChart.setOption(option)
      waterOption && waterChart.setOption(waterOption)
@@ -1198,7 +1203,6 @@
      compareOption && compareChart.setOption(compareOption)
   }


   function queryEqp() {
      queryById({ id: router.currentRoute.value.params.id }).then((res) => {
         // console.log(`output->res`, res)
@@ -1208,27 +1212,24 @@
      })
   }


   var shangliaoFlag = false;
   var statusGif = 'tmrefeng2';
   var shangliaoFlag = false
   var statusGif = 'tmrefeng2'
   var statusTxt = '正在干燥'

   function chaiwangban() {
      statusGif = 'chaiwangban-1'
      setTimeout(shangliao,7000)
					
   }

   function shangliao() {
      statusGif = "shangliao-N"
      statusGif = 'shangliao-N'
      setTimeout(()=>{
         statusGif = "zhuangwangban"
         statusGif = 'zhuangwangban'
         setTimeout(()=>{
            statusGif = "guanmen1"
            statusGif = 'guanmen1'
            setTimeout(()=>{
               shangliaoFlag = false
            },4000)
				
         },5000)
      },13000)
   }
@@ -1238,9 +1239,8 @@
      let eqpCode = eqp.value.code
      let queryRealTimeUrl = '/dry/real/getRealTimeData'
      defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
			
         if (res && res.trendVo) {
            console.log(`output->re11s`, res)
            //console.log(`output->re11s`, res)
            //   res.tempValue = [res.windTemp, 100]
            //res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
            /**水滴图含水量 */
@@ -1387,19 +1387,17 @@
                     },
                     yAxis: {
                        max: function (value) {
									
                           console.log("max::",value);
                           //   console.log("max::",value);
                              if (value.max < standard.value.xiaolv + 3) {
                                 return standard.value.xiaolv + 3
                              } else {
                                 return value.max
                              }
                           },
								
								
								
                     },
                     series: [{ data: ganZaoXiaoLv,
                     series: [
                        {
                           data: ganZaoXiaoLv,
                        markLine: {
                        symbol: 'none',
                           data: [
@@ -1410,9 +1408,12 @@
                           ],
                           label: {
                              formatter: '{b}\n{c}',
										
                           },
                     } }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
                           },
                        },
                        { data: zhengQiXiaoHao },
                        { data: dianNengXiaoHao },
                     ],
                  })
               }

@@ -1460,7 +1461,7 @@
            }

            /**效率对比图 */
            if( (res.originWeight - res.yield) <= 0) {
            if (res.originWeight - res.yield <= 0) {
               res.xiaolv =  standard.value.xiaolv + 6
            } else {
               res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
@@ -1479,15 +1480,13 @@
               res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
            }


				
            /** 蒸汽消耗 */
            if( (res.originWeight - res.yield) <= 0) {
            if (res.originWeight - res.yield <= 0) {
               res.zhengqi = standard.value.zhengqi -3
            } else {
               res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
            }
            console.log('zhengqi:', res.zhengqi);
            //console.log('zhengqi:', res.zhengqi);
            if (res.zhengqi > standard.value.zhengqi) {
               res.zqbad = true
               res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%'
@@ -1501,10 +1500,8 @@
               res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
            }

				
				
            /** 电能消耗 */
            if( (res.originWeight - res.yield) <= 0) {
            if (res.originWeight - res.yield <= 0) {
               res.dian = standard.value.dian -1.5
            } else {
               res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
@@ -1515,7 +1512,6 @@
               res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
               res.dnrHeight = '100%'
            } else if (res.dian < standard.value.dMin) {
					
               res.dngood = true
               res.dnsHeight = '100%'
               res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
@@ -1563,15 +1559,14 @@
            }
            }
            

            if (compareChart) {
               compareChart.setOption({
                  yAxis: {
                     data: res.compEqpNum
                     data: res.compEqpNum,
                  },
                  series: {
                     data: res.compEqpEffic
                  }
                     data: res.compEqpEffic,
                  },
               })
            }

@@ -1597,10 +1592,10 @@
            res = {
               mois: [],
               gif: 'tmrefeng2',
               herbImage: 'yaocai1.png'
               herbImage: 'yaocai1.png',
            }
         }
         console.log(`output->res`, res)
         //console.log(`output->res`, res)
         realData.value = res
      })
   }
@@ -1665,7 +1660,6 @@
      border-radius: 10px;
      flex-wrap: wrap;
      background-position: -78px 119px;

   }
   .leftTop0 {
      height: 600px;
@@ -1676,7 +1670,6 @@
      flex-wrap: wrap;
   }
   .leftMid {
		
      width: 780px;
      height: 230px;
      /* border: 1px solid; */
@@ -1735,7 +1728,6 @@
      align-items: center;
      font-size: 30px;
      color: #727272;
		
   }
   .leftTop2 {
      width: 250px;