设备监控完善

bsw215583320

2023-06-26 d9d32b6627e75d945e2ab8709aa1a12a95305d82

 src/views/dry/monitor/Eqp.vue

@@ -1,120 +1,43 @@
<template>
   <div class="eqpBox">
   <div  class="eqpBox">
      <div class="eqpRow">
         <div class="eqpImage">
         <div class="eqpImage" >
				
            <div class="leftEqp">
               <div class="leftTop">
                  <div class="leftTop1">
                     <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                     <div>
                        <div class="mainInfo">{{ realData?.remain | 0 }}min</div>
                        <div class="subhead">剩余时间</div>
                     </div>
                  </div>
                  <div class="leftTop1">
                     <!-- <Icon icon="mdi:chart-finance" :size="50" />
                     <div>
                        <div class="mainInfo">98 %</div>
                        <div class="subhead">干燥效率</div>
                     </div> -->
                  </div>
                  <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + realData?.gif + '.gif)' }"></div>
                  <div class="outDiv eqpStatus">
                     <div
                        style="
                           font-size: 28px;
                           margin-top: 60px;
                           color: white;
                           background-color: #1595ea;
                           height: 60px;
                           width: 180px;
                           line-height: 60px;
                           text-align: center;
                           border-radius: 5px;
                           font-weight: bold;
                        "
                     >
                        正在干燥
                     </div>
                     <!-- <div
                        class="eqpInfoText blingbling"
                        style="
                           position: absolute;

                           max-height: 130px;
                           max-width: 360px;
                           border-radius: 10px;
                           background-color: #ce0000;
                           color: white;
                           padding: 10px;
                        "
                     >
                        <div class="outDiv">
                           <div><Icon icon="bx:error" :size="30" /> </div>
                           <div><span> 有一个故障，请检查机器。</span></div>
                        </div>
                     </div> -->
                  </div>
               </div>
               <div class="leftMid">
                  <div id="efficiencyLine" style="width: 780px; height: 150px"></div>
                  <div style="height: 0px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
                     <div style="width: 100px; height: 20px">0 min</div>
                     <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
                  </div>
                  <div id="progressBar" style="width: 780px; height: 80px"></div>
               </div>
               <!-- <div class="outDiv">
                  <div style="height: 100px; width: 400px">
                     <Progress
                        :stroke-color="{
                           from: '#108ee9',
                           to: '#87d068',
                        }"
                        :percent="realData?.percent"
                        status="active"
                        :show-info="false"
                     />
                     <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
                        <span>干燥 52 Min</span>
                        <span>预计 120 Min</span>
                     </div>
                  </div>
               </div> -->
            </div>
            <div class="rightInfo">
               <div class="rightTop">
                  <div class="herbInfo">
                     <div class="curEqp">
                        <div class="eqpName">
                           <div class="mainInfo" style="font-size: 26px">{{ eqp.name }}</div>
                           <div class="subhead">{{ eqp.type }}</div>
               <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>
                           <div class="subhead">{{ eqp?.type }}</div>
                           <!-- <dv-decoration-1 style="width:150px;height:60px; margin-left: 20px;" /> -->
                           <!-- 设备：{{ eqp.name }}</div>
                        <div class="eqpName">型号：{{ eqp.type }}</div> -->
                        </div>
                     </div>
                     <div class="curHerb">
                     </dv-border-box7>
                     <dv-border-box7 class="curHerb" :style="{'background-image': 'url(/src/assets/images/dry/yaocai/'+realData?.herbImage+')'}">
                        <div class="eqpName" style="margin-left: 100px">
                           <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
                           <div class="subhead">干燥配方</div>
                        </div>
                        <div class="formula">
                           <div class="formulaItem">
                              <Icon icon="icon-park-twotone:box" :size="35" />
                              <Icon  style="color: powderblue"  icon="icon-park-twotone:box" :size="35" />
                              <div>
                                 <div class="mainInfo2">{{ realData?.feed }}筐</div>
                                 <div class="subhead2">投料量</div>
                              </div>
                           </div>
                           <div class="formulaItem">
                              <Icon icon="bx:wind" :size="35" />
                              <Icon  style="color: red"  icon="bx:wind" :size="35" />
                              <div>
                                 <div class="mainInfo2">{{ realData?.windTemp }}°C</div>
                                 <div class="subhead2">热风</div>
                              </div>
                           </div>
                           <div class="formulaItem">
                              <Icon icon="tabler:target-arrow" :size="35" />
                              <Icon  style="color: green"  icon="tabler:target-arrow" :size="35" />
                              <div>
                                 <div class="mainInfo2">{{ realData?.target }}%</div>
                                 <div class="subhead2">目标</div>
@@ -123,14 +46,15 @@
                        </div>
                        <!-- <div class="eqpName">{{ realData?.herbName }}</div>
                        <div class="eqpName">{{ realData?.feed }} 筐</div> -->
                     </dv-border-box7>
                  </div>
                  <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                     <div class="chartTittle">风机频率</div>
                     <div class="outDiv" style="padding-top: 10px">
                        <div id="fanFreq" style="width: 220px; height: 200px"></div>
                     </div>
                  </div>
                  <div class="tempMoisChart">
                     <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
                  </div>
               </div>
               <div class="rightTwo">
                  <div class="infoChart">
                  </dv-border-box7> -->
                  <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                     <div class="chartTittle">含水率</div>
                     <div class="outDiv" style="padding-top: 20px">
                        <div class="leftData">
@@ -156,25 +80,113 @@
                        <div id="moisture" style="width: 170px; height: 133px"></div>
                     </div>
                     <div class="subhead2" style="margin-top: -37px; padding-left: 172px">实时含水率</div>
                  </dv-border-box7>
            </div>
               <dv-border-box7  class="leftTop">

                  <div class="leftTop0">
                  <div class="leftTop1">
                     <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                     <div>
                        <div class="mainInfo">{{ realData?.totalRemain | 0 }}min</div>
                        <div class="subhead">剩余时间</div>
                     </div>
                  </div>
                  <div class="infoChart">
                  <div class="leftTop1">
                     <Icon icon="bi:fan" :size="50" />
                     <div>
                        <div class="mainInfo">{{ realData.trendVo?.fanFrequency | 0 }} Hz</div>
                        <div class="subhead">风机频率</div>
                     </div>
                  </div>
                  <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + statusGif + '.gif)' }"></div>
                  <div class="outDiv eqpStatus">
                     <div
                        style="
                           font-size: 28px;
                           margin-top: 60px;
                           color: white;
                           background-color: #1595ea;
                           height: 60px;
                           width: 180px;
                           line-height: 60px;
                           text-align: center;
                           border-radius: 5px;
                           font-weight: bold;
                        "
                     >
                        {{ statusTxt }}
                     </div>
                     <div v-if="realData?.isError"
                        class="eqpInfoText blingbling"
                        style="
                           position: absolute;

                           max-height: 130px;
                           max-width: 360px;
                           border-radius: 10px;
                           background-color: #ce0000;
                           color: white;
                           padding: 10px;
                        "
                     >
                        <div class="outDiv">
                           <div><Icon icon="bx:error" :size="30" /> </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;">
                     <div class="chartTittle">风箱温度</div>
                     <div class="outDiv">
                        <div id="bellowsTemp" style="width: 220px; height: 200px">
                           <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                        </div>
                     </div>
                  </dv-border-box7>
               <dv-border-box7 class="leftMid">
                  <div class="chartTittle">实时进度</div>
                  <div id="efficiencyLine" style="width: 780px; height: 130px; margin-top: -10px"></div>
                  <div style="height: 10px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
                     <div style="width: 100px; height: 20px">0 min</div>
                     <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
                  </div>
                  <div class="infoChart">
                     <div class="chartTittle">风机频率</div>
                     <div class="outDiv" style="padding-top: 10px">
                        <div id="fanFreq" style="width: 220px; height: 200px"></div>
                  <div id="progressBar" style="width: 780px; height: 80px"></div>
               </dv-border-box7>
			
               <!-- <div class="outDiv">
                  <div style="height: 100px; width: 400px">
                     <Progress
                        :stroke-color="{
                           from: '#108ee9',
                           to: '#87d068',
                        }"
                        :percent="realData?.percent"
                        status="active"
                        :show-info="false"
                     />
                     <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
                        <span>干燥 52 Min</span>
                        <span>预计 120 Min</span>
                     </div>
                  </div>
                  <div class="infoChart">
               </div> -->
            </div>
            <div class="rightInfo">
               <div class="rightTop">
						
                  <dv-border-box7 class="tempMoisChart">
                     <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
                  </dv-border-box7>
               </div>
               <div class="rightTwo">
                  <dv-border-box7 class="infoChart">
                     <div class="chartTittle">
                        干燥效率(kg/h)
                        <div style="width: 120px; display: flex; justify-content: space-between">
                        <div class="rightLabel">
                           <div class="label good">&gt;{{ standard.xiaolv }} 优 </div>
                           <div class="label bad">&lt;{{ standard.xlMin }} 差</div>
                        </div>
@@ -227,11 +239,13 @@
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="infoChart">
                  </dv-border-box7>

						
                  <dv-border-box7 class="infoChart">
                     <div class="chartTittle"
                        >蒸汽消耗(m³/kg)
                        <div style="width: 120px; display: flex; justify-content: space-between">
                        <div class="rightLabel">
                           <div class="label bad">&gt;{{ standard.zhengqi }} 差</div>
                           <div class="label good">&lt;{{ standard.zqMin }} 优</div>
                        </div>
@@ -240,16 +254,16 @@
                        <div class="leftData">
                           <div class="center" style="height: 100%">
                              <div class="centerText">
                                 <div class="mainInfo3"><span>45</span>m³ </div>
                                 <div class="mainInfo3"><span>{{realData?.steam}}</span>m³ </div>
                                 <div class="subhead2">蒸汽用量</div>
                              </div>
                           </div>
                        </div>
                        <div class="rightChart center">
                           <div class="center compareBar">
                              <div class="barTop">25</div>
                              <div class="barTop">{{standard.zhengqi}}</div>
                              <div class="barBack">
                                 <div class="barDiv" id="zhengqiS"></div>
                                 <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
                              </div>
                              <div style="line-height: 18px">
                                 额定
@@ -258,9 +272,10 @@
                              </div>
                           </div>
                           <div class="center compareBar">
                              <div class="barTop">26</div>
                              <div class="barTop">{{realData?.zhengqi | 0 }}</div>
                              <div class="barBack">
                                 <div class="barDiv" id="zhengqiR"> </div>
                                 <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                    :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
                              </div>
                              <div style="line-height: 18px">
                                 实时
@@ -270,10 +285,16 @@
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="infoChart">
                  </dv-border-box7>
                  <dv-border-box7 class="infoChart" >
                     <div class="chartTittle">效率对比</div>
                     <div class="outDiv" style="padding-top: 10px">
                        <div id="compare" style="width: 300px; height: 200px"></div>
                     </div>
                  </dv-border-box7>
                  <dv-border-box7 class="infoChart">
                     <div class="chartTittle">
                        <div> 电能消耗（kw/h/kg） </div>
                        <div> 电能消耗(kWh/kg)</div>
                        <div class="rightLabel">
                           <div class="label bad">&gt;{{ standard.dian }} 差</div>
                           <div class="label good">&lt;{{ standard.dMin }} 优</div>
@@ -283,16 +304,16 @@
                        <div class="leftData">
                           <div class="center" style="height: 100%">
                              <div class="centerText">
                                 <div class="mainInfo3"><span>45</span>kw/h </div>
                                 <div class="mainInfo3"><span>{{realData?.watt}}</span>kWh </div>
                                 <div class="subhead2">电能用量</div>
                              </div>
                           </div>
                        </div>
                        <div class="rightChart center">
                           <div class="center compareBar">
                              <div class="barTop">12</div>
                              <div class="barTop">{{standard.dian}}</div>
                              <div class="barBack">
                                 <div class="barDiv" id="dianS"></div>
                                 <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
                              </div>
                              <div style="line-height: 18px">
                                 额定
@@ -301,9 +322,10 @@
                              </div>
                           </div>
                           <div class="center compareBar">
                              <div class="barTop">10</div>
                              <div class="barTop">{{realData?.dian | 0}}</div>
                              <div class="barBack">
                                 <div class="barDiv" id="dianR"></div>
                                 <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                    :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
                              </div>
                              <div style="line-height: 18px">
                                 实时
@@ -313,7 +335,7 @@
                           </div>
                        </div>
                     </div>
                  </div>
                  </dv-border-box7>
               </div>
            </div>
         </div>
@@ -322,6 +344,8 @@
</template>

<script setup lang="ts">
  import { useFullscreen } from '@vueuse/core';
   import { BorderBox13 as DvBorderBox7 } from '@kjgl77/datav-vue3'
   import { router } from '/@/router'
   import { onMounted, ref, onUnmounted } from 'vue'
   import { Progress } from 'ant-design-vue'
@@ -332,6 +356,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 { toggle: toggleDom } = useFullscreen(domRef);
   const Timer = ref()
   const marks = ref<Record<number, any>>({
      0: '0°C',
@@ -436,6 +464,7 @@
      99: '',
      100: '100°C',
   })
	
   const eqp = ref({} as dryEquipment)
   const userStore = useUserStore()
   const realData = ref({})
@@ -448,42 +477,51 @@
      dMin: 7.5,
   })
   //realData.value.tempValue = [0, 100]
   realData.value.mois = [0, 0, 0]
   realData.value.mois = [0.5, 0.35, 0.2]
   realData.value.gif = 'tmrefeng2'
   realData.value.herbImage = 'yaocai1.png'
   var moisChart: echarts.ECharts
   var waterChart: echarts.ECharts

   var bellowsTempChart: echarts.ECharts
   var fanFreqChart: echarts.ECharts
   // var fanFreqChart: echarts.ECharts
   var progressBarChart: echarts.ECharts
   var efficiencyLineChart: echarts.ECharts

   var compareChart: echarts.ECharts
   function initCharts() {
      let domId = 'moisChart'
      let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
      let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
      let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
      let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
      // let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
      let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
      let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
      let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement
      // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
      moisChart = echarts.init(chartDom)
      waterChart = echarts.init(waterDom)
      bellowsTempChart = echarts.init(bellowsTempDom)
      fanFreqChart = echarts.init(fanFreqDom)
      //fanFreqChart = echarts.init(fanFreqDom)
      progressBarChart = echarts.init(progressBarDom)
      efficiencyLineChart = echarts.init(efficiencyLineDom)
      compareChart = echarts.init(compaerDom)

      const option = {
         color: ['#2C4D90', '#CE0000'],
         color: ['green', 'red'],
         title: {
            text: '含水率温度趋势',
            text: '含水率/温度趋势',
            textStyle: {
               //color: '#fff',
               fontSize: 15
            },
         },
         tooltip: {
            trigger: 'axis',
         },
         grid: {
            left: 50,
            right: 50,
            right: 70,
            top: 50,
            bottom: 40,
         },
@@ -549,6 +587,19 @@
               markLine: {
                  data: [{ type: 'average', name: 'Avg' }],
               },
               areaStyle: {
                  opacity: 0.2,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: 'rgb(128, 255, 165)'
                  },
                  {
                     offset: 1,
                     color: 'rgb(1, 191, 236)'
                  }
                  ])
               },
            },
            {
               name: '温度',
@@ -561,6 +612,19 @@
               ],
               lineStyle: {
                  width: 1,
               },
               areaStyle: {
                  opacity: 0.2,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: 'rgb(255, 0, 135)'
                  },
                  {
                     offset: 1,
                     color: 'rgb(135, 0, 157)'
                  }
                  ])
               },
               // markLine: {
               //    data: [
@@ -595,7 +659,7 @@
               amplitude: 3,
               animationDuration: 5,
               //animationDurationUpdate: 0,
               data: realData.value.mois,
               data: [0.56,0.44,0.32],
               shape:
                  'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z',
               outline: {
@@ -731,60 +795,60 @@
         ],
      }

      const fanFreqOption = {
         series: [
            {
               type: 'gauge',
               progress: {
                  show: true,
                  width: 9,
               },
               axisLine: {
                  lineStyle: {
                     width: 9,
                  },
               },
               axisTick: {
                  show: false,
               },
               splitLine: {
                  distance: 3,
                  length: 4,
                  lineStyle: {
                     width: 1,
                     color: '#999',
                  },
               },
               axisLabel: {
                  distance: 15,
                  color: '#999',
                  fontSize: 10,
               },
               anchor: {
                  show: true,
                  showAbove: true,
                  size: 10,
                  itemStyle: {
                     borderWidth: 3,
                  },
               },
               title: {
                  show: false,
               },
               detail: {
                  valueAnimation: true,
                  fontSize: 20,
                  offsetCenter: [0, '70%'],
                  formatter: '{value}Hz',
               },
               data: [
                  {
                     value: 56,
                  },
               ],
            },
         ],
      }
      // const fanFreqOption = {
      //    series: [
      //       {
      //          type: 'gauge',
      //          progress: {
      //             show: true,
      //             width: 9,
      //          },
      //          axisLine: {
      //             lineStyle: {
      //                width: 9,
      //             },
      //          },
      //          axisTick: {
      //             show: false,
      //          },
      //          splitLine: {
      //             distance: 3,
      //             length: 4,
      //             lineStyle: {
      //                width: 1,
      //                color: '#999',
      //             },
      //          },
      //          axisLabel: {
      //             distance: 15,
      //             color: '#999',
      //             fontSize: 10,
      //          },
      //          anchor: {
      //             show: true,
      //             showAbove: true,
      //             size: 10,
      //             itemStyle: {
      //                borderWidth: 3,
      //             },
      //          },
      //          title: {
      //             show: false,
      //          },
      //          detail: {
      //             valueAnimation: true,
      //             fontSize: 20,
      //             offsetCenter: [0, '70%'],
      //             formatter: '{value}Hz',
      //          },
      //          data: [
      //             {
      //                value: 56,
      //             },
      //          ],
      //       },
      //    ],
      // }
      // const weightOption = {
      //    //       title: {
      //    //   text: 'Referer of a Website',
@@ -1001,13 +1065,16 @@
            trigger: 'axis',
         },
         grid: {
            top: '20%',
            top: '30%',
            left: '17',
            right: '57',
            bottom: '0%',
            containLabel: true,
         },
         legend: {},
         legend: {
            right: 60,
				
         },
         xAxis: {
            show: false,
            axisLine: {
@@ -1033,6 +1100,7 @@
            axisLabel: {
               formatter: '{value} °C',
            },
            max: standard.value.xiaolv + 3,
         },
         series: [
            {
@@ -1054,6 +1122,19 @@
                     { type: 'min', name: 'Min' },
                  ],
               },
               markLine: {
                           symbol: 'none',
                           data: [
                              {
                                 name: '额定',
                                 yAxis: standard.value.xiaolv,
                              },
                           ],
                           label: {
                              formatter: '{b}\n{c}',
									
                           },
                        },
               // markLine: {
               //    data: [{ type: 'average', name: 'Avg' }],
               // },
@@ -1061,14 +1142,62 @@
         ],
      }

      const compareOption = {
					
               tooltip: {
                  trigger: 'axis',
					
               },
               grid: {
                  top: '6%',
                  left: '10%',
                  right: '10%',
                  bottom: '3%',
                  containLabel: true
               },
               xAxis: {
                  show: false,
                  type: 'value',
					
               },
               yAxis: {
                  axisLine: {
                     show:false,
                  },
                  axisTick: {
                     show: false,
                  },
                  type: 'category',
                  data: ['1#', '2#', '3#', '4#', '5#', '6#']
               },
               series: [
                  {
                     name: '2011',
                     type: 'bar',
                     barWidth: 10,
                     data: [190, 89, 34, 70, 44, 30],
                     label: {
                        show: true,
                        position: 'right',
                        valueAnimation: true,
								
                        color: '#fff' 
                     }
                  },
               ]
            }
		

      option && moisChart.setOption(option)
      waterOption && waterChart.setOption(waterOption)
      bellowsOption && bellowsTempChart.setOption(bellowsOption)
      fanFreqOption && fanFreqChart.setOption(fanFreqOption)
      //fanFreqOption && fanFreqChart.setOption(fanFreqOption)

      progressBarOption && progressBarChart.setOption(progressBarOption)
      efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
      compareOption && compareChart.setOption(compareOption)
   }


   function queryEqp() {
      queryById({ id: router.currentRoute.value.params.id }).then((res) => {
@@ -1079,13 +1208,39 @@
      })
   }


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

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

   function shangliao() {
      statusGif = "shangliao-N"
      setTimeout(()=>{
         statusGif = "zhuangwangban"
         setTimeout(()=>{
            statusGif = "guanmen1"
            setTimeout(()=>{
               shangliaoFlag = false
            },4000)
				
         },5000)
      },13000)
   }

   function queryRealTime() {
      let tenantId = userStore.getTenant
      let eqpCode = eqp.value.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) {
            console.log(`output->re11s`, res)
            //   res.tempValue = [res.windTemp, 100]
            //res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
            /**水滴图含水量 */
@@ -1117,19 +1272,19 @@
               })
            }
            /**风机频率环形图 */
            if (fanFreqChart) {
               fanFreqChart.setOption({
                  series: [
                     {
                        data: [
                           {
                              value: res.trendVo.fanFrequency,
                           },
                        ],
                     },
                  ],
               })
            }
            // if (fanFreqChart) {
            //    fanFreqChart.setOption({
            //       series: [
            //          {
            //             data: [
            //                {
            //                   value: res.trendVo.fanFrequency,
            //                },
            //             ],
            //          },
            //       ],
            //    })
            // }
            /**干燥进度、走势与阶段效率和阶段消耗 */
            if (res && res.detailList) {
               var progressSeries = []
@@ -1140,12 +1295,14 @@
               var beforeWeight = 0
               res.moisList = []

               beforeWeight = res.originWeight
               res.detailList.forEach((item) => {
                  console.log(`output->item`, item)
                  //console.log(`output->item`, item)
                  res.moisList.push([item.totalTime, item.moisture])
                  console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                  //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                  var curDryTime = item.totalTime - totalTime

                  //console.log("curDryTime:", curDryTime)
                  //console.log("bw:",beforeWeight,"iw:", item.weight);
                  if (curDryTime > 0) {
                     progressSeries.push({
                        name: item.moisture,
@@ -1184,7 +1341,7 @@
                        ],
                     })
                  }

                  res.totalRemain = res.remain - (res.dryTime - totalTime)>0?res.remain - (res.dryTime - totalTime):0
                  progressSeries.push({
                     name: '剩余',
                     type: 'bar',
@@ -1208,7 +1365,7 @@

               /**干燥进度 */
               if (progressBarChart) {
                  console.log(`output->progressSeries`, progressSeries)
                  //console.log(`output->progressSeries`, progressSeries)
                  progressBarChart.setOption(
                     {
                        xAxis: {
@@ -1223,12 +1380,39 @@
               res.totalTime = totalTime + res.remain
               /**干燥效率、消耗 */
               if (efficiencyLineChart) {
                  console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
                  //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
                  efficiencyLineChart.setOption({
                     xAxis: {
                        max: totalTime + res.remain,
                     },
                     series: [{ data: ganZaoXiaoLv }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
                     yAxis: {
                        max: function (value) {
									
                           console.log("max::",value);
                              if (value.max < standard.value.xiaolv + 3) {
                                 return standard.value.xiaolv + 3
                              } else {
                                 return value.max
                              }
                           },
								
								
								
                     },
                     series: [{ data: ganZaoXiaoLv,
                        markLine: {
                        symbol: 'none',
                           data: [
                              {
                                 name: '额定',
                                 yAxis: standard.value.xiaolv,
                              },
                           ],
                           label: {
                              formatter: '{b}\n{c}',
										
                           },
                     } }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
                  })
               }

@@ -1276,7 +1460,12 @@
            }

            /**效率对比图 */
            res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
            if( (res.originWeight - res.yield) <= 0) {
               res.xiaolv =  standard.value.xiaolv + 6
            } else {
               res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
            }
				
            if (res.xiaolv > standard.value.xiaolv) {
               res.xlgood = true
               res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
@@ -1285,13 +1474,130 @@
               res.xlbad = true
               res.xlsHeight = '100%'
               res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
            } else {
               res.xlsHeight = '100%'
               res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
            }

            /**gif动图 */
            res.gif = 'refeng2'

				
            /** 蒸汽消耗 */
            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);
            if (res.zhengqi > standard.value.zhengqi) {
               res.zqbad = true
               res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%'
               res.zqrHeight = '100%'
            } else if (res.zhengqi < standard.value.zqMin) {
               res.zqgood = true
               res.zqsHeight = '100%'
               res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
            } else {
               res.zqsHeight = '100%'
               res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
            }

				
				
            /** 电能消耗 */
            if( (res.originWeight - res.yield) <= 0) {
               res.dian = standard.value.dian -1.5
            } else {
               res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
            }
				
            if (res.dian > standard.value.dian) {
               res.dnbad = true
               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 + '%'
            } else {
               res.dnsHeight = '100%'
               res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
            }

            /**状态/gif动图 */
            if (!shangliaoFlag) {
               if (res.orderStatus == 0) {
               statusGif = 'zanting'
               statusTxt = '准备'
            } else if (res.orderStatus == 1) {
               shangliaoFlag = true
               statusGif = 'kaimen1'
               statusTxt = '上料'
               setTimeout(chaiwangban,4000)
            } else if (res.orderStatus == 2) {
               if(res.state_fan == 1) {
                  statusGif = 'tmrefeng2'
                  statusTxt = '正在干燥'
               }

               if(res.state_roller == 4) {
                  statusGif = 'fanliao-N'
                  statusTxt = '正在翻料'
               }

               if (res.state_roller == 5) {
                  statusGif = 'chuliao-N'
                  statusTxt = '正在出料'
               }
					
               if (res.state_windbox == 2 || res.state_windbox == 3) {
                  statusGif = 'fengxiangsheng-1'
                  statusTxt = '正在干燥'
               }
            } else if(res.orderStatus == 3) {
               statusGif = 'zanting'
               statusTxt = '暂停'
            } else if(res.orderStatus == 4) {
               statusGif = 'zanting'
               statusTxt = '干燥完成'
            }
            }
				

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

            res.herbImage = 'yaocai1.png'

            if (res.herbName == '白花蛇舌草') {
               res.herbImage = 'baihuasheshecao.png'
            } else if (res.herbName == '糥稻根') {
               res.herbImage = 'nuodaogen.png'
            } else if (res.herbName == '淫羊藿') {
               res.herbImage = 'yinyanghuo.png'
            } else if (res.herbName == '马齿苋') {
               res.herbImage = 'machixian.png'
            } else if (res.herbName == '墨旱莲') {
               res.herbImage = 'mohanlian.png'
            } else if (res.herbName == '桑白皮') {
               res.herbImage = 'sangbaipi.png'
            }
            res.isError = false

            res.errorMsg = '有一个故障，请检查。'
         } else {
            res = {
               mois: [],
               gif: 'tmrefeng2',
               herbImage: 'yaocai1.png'
            }
         }
         console.log(`output->res`, res)
@@ -1316,14 +1622,15 @@
      height: 100%;
   }
   .eqpRow {
      background: white;
   }
   .eqpImage {
      height: 860px;
      width: 1800px;
      background-image: url(/src/assets/images/dry/ganzaoji-x.png);
      background-repeat: no-repeat;
       /* background-image: url(/src/assets/images/dry/bg.png);
      background-repeat: no-repeat; */

      background-position: 160px 280px;
      /*background-position: 160px 280px; */
      /* background-color: red; */
      padding: 10px;
      display: flex;
@@ -1333,7 +1640,10 @@

   .leftEqp {
      height: 840px;
      width: 780px;
      width: 1080px;
      display: flex;
      flex-wrap: wrap;
		
      /* background-color: white;
      background-image: url(/src/assets/images/dry/shebei1.png);
      background-repeat: no-repeat;
@@ -1344,25 +1654,35 @@

   .leftTop {
      height: 600px;
      width: 780px;
      display: flex;
      justify-content: center;
      align-content: flex-start;
      background-color: white;
      /* background-color: white; */
      background-image: url(/src/assets/images/dry/shebei1.png);
      background-repeat: no-repeat;
      background-size: 110%;
      border-radius: 10px;
      flex-wrap: wrap;
      background-position: -78px 119px;

   }
   .leftTop0 {
      height: 600px;
      width: 780px;
      display: flex;
      justify-content: center;
      align-content: flex-start;
      flex-wrap: wrap;
   }
   .leftMid {
      padding-top: 10px;
		
      width: 780px;
      height: 230px;
      /* border: 1px solid; */
      margin-top: 10px;
      border-radius: 10px;
      background: white;
      /* background: white; */
   }
   .mainInfo {
      line-height: 33px;
@@ -1415,6 +1735,7 @@
      align-items: center;
      font-size: 30px;
      color: #727272;
		
   }
   .leftTop2 {
      width: 250px;
@@ -1447,7 +1768,7 @@
      flex-wrap: wrap;
      align-content: flex-start;
      height: 850px;
      width: 900px;
      width: 600px;
   }

   .rightTop {
@@ -1463,7 +1784,7 @@
   .infoChart {
      width: 290px;
      height: 230px;
      background: white;
      /* background: white; */
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 10px;
@@ -1507,14 +1828,15 @@
      background-color: #1595ea;
   }
   .bad {
      background-color: #fdcb6e;
      background-color: #ed6f6f;
   }
   .rightLabel {
      width: 120px;
      width: 110px;
      display: flex;
      justify-content: space-between;
   }
   .label {
      color: white;
      text-align: center;
      width: 50px;
      border-radius: 4px;
@@ -1523,7 +1845,7 @@
      line-height: 21px;
   }
   .good {
      background-color: #75f94d;
      background-color: #2ecf54;
   }

   .mainInfo3 {
@@ -1538,15 +1860,15 @@
   .curEqp {
      width: 290px;
      height: 120px;
      background: white;
      border-radius: 10px;
      /* background: white;
      border-radius: 10px; */
   }
   .curHerb {
      margin-top: 10px;
      width: 290px;
      height: 230px;
      background: white;
      border-radius: 10px;
      /* background: white;
      border-radius: 10px; */
      background-image: url(/src/assets/images/dry/yaocai.jpg);
      background-repeat: no-repeat;
      background-size: 110px 90px;
@@ -1555,15 +1877,15 @@
   .tempMoisChart {
      width: 590px;
      height: 360px;
      background: white;
      margin-left: 10px;
      /* background: white; */
		
      padding: 20px;
      border-radius: 10px;
   }
   .topLeft {
      margin: 20px 40px 60px 20px;
      padding: 15px;
      background: white;
      /* background: white; */
      border-radius: 10px;
      height: 325px;
      width: 440px;
@@ -1575,7 +1897,7 @@
   }
   .topMid {
      margin: 20px 20px 60px 40px;
      background: white;
      /* background: white; */
      border-radius: 10px;
      background-image: url(/src/assets/images/dry/fanliao.gif);
      background-repeat: no-repeat;
@@ -1587,7 +1909,7 @@
   }
   .topRight {
      margin: 20px 20px 60px 20px;
      background: white;
      /* background: white; */
      border-radius: 10px;
      width: 700px;
      padding: 20px;
@@ -1656,6 +1978,7 @@

   .formulaItem {
      display: flex;
      justify-content: center;
      width: 85px;
      height: 40px;
   }