Merge remote-tracking branch 'origin/master'

baoshiwei

2024-05-27 fa3ac93010bea3805438ee3ab0a182bfbf7423da

 src/views/dry/bigScreen/BigEqp.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2247 @@
<template>
   <dv-full-screen-container>
      <div class="eqpBox">
         <div class="eqpRow">
            <div class="eqpImage" :style="{ 'background-position': position + 'px' }">
               <div class="leftEqp">
                  <div style="width: 350px">
                     <div class="herbInfo">
                        <dv-border-box7 class="curEqp">
                           <div style="display: flex">
                              <div style="padding-top: 20px; padding-left: 10px" @click="back">
                                 <Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" />
                              </div>
                              <div class="eqpName" style="text-align: right" @click="changeEqp">
                                 <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
                                 <div class="subhead">{{ eqp?.type }}</div>
                                 <dv-decoration-1 style="width: 240px; height: 90px; margin-left: 20px" />
                                 <!-- è®¾å¤‡ï¼š{{ eqp.name }}</div>
                        <div class="eqpName">型号：{{ eqp.type }}</div> -->
                              </div>
                           </div>
                        </dv-border-box7>
                        <dv-border-box7 class="curHerb" :style="{ 'background-image': 'url(' + getHerbImageUrl(realData?.herbImage) + ')' }">
                           <div class="eqpName" style="margin-left: 156px; height: 190px">
                              <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
                              <div class="subhead">干燥配方</div>
                           </div>
                           <div class="formula">
                              <div class="formulaItem">
                                 <Icon style="color: powderblue" icon="la:box" :size="38" />
                                 <div>
                                    <div class="mainInfo2">{{ realData?.feed }} ç­</div>
                                    <div class="subhead2">投料量</div>
                                 </div>
                              </div>
                              <div class="formulaItem">
                                 <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 style="color: green" icon="tabler:target-arrow" :size="35" />
                                 <div>
                                    <div class="mainInfo2">{{ realData?.target }} %</div>
                                    <div class="subhead2">目标</div>
                                 </div>
                              </div>
                           </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: 240px; height: 240px"></div>
                     </div>
                  </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">
                              <div class="center" style="height: 50%">
                                 <div class="centerText">
                                    <div class="mainInfo3"
                                       ><span>{{ realData?.target }}</span> %
                                    </div>
                                    <div class="subhead2">目标含水率</div>
                                 </div>
                              </div>
                              <div class="center" style="height: 50%">
                                 <div>
                                    <div class="mainInfo3"
                                       ><span>{{ realData?.initial }}</span> %</div
                                    >
                                    <div class="subhead2">来料含水率</div>
                                 </div>
                              </div>
                           </div>
                           <div id="moisture" style="width: 170px; height: 170px"></div>
                        </div>
                        <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">实时含水率</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="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(' + getStatusImageUrl(statusGif) + ')' }"></div>
                        <div class="outDiv eqpStatus">
                           <div
                              style="
                                 font-size: 28px;

                                 color: white;
                                 background-color: #1595ea;
                                 height: 60px;
                                 width: 180px;
                                 line-height: 60px;
                                 text-align: center;
                                 border-radius: 10px;
                                 font-weight: bold;
                              "
                           >
                              {{ statusTxt }}
                           </div>
                           <div v-if="realData?.warning" style=" 
                                 margin-left: 100px;
                                 font-size: 22px;
                                 background: sandybrown;

                                 border-radius: 10px;
                                 line-height: 25px;
                                 max-width: 500px;
                                 padding: 15px;
                                 font-weight: bold;" >
                              {{ realData?.warnMsg }}
                           </div>
									
									
								
                           <div
                              v-if="realData?.isError"
                              class="eqpInfoText blingbling outDiv"
                              style="
                                 position: absolute;
                                 font-size: 30px;
                                 max-height: 200px;
                                 max-width: 720px;
                                 margin-top: 300px;
                                 border-radius: 10px;
                                 background-color: #ce0000;
                                 color: white;
                                 padding: 10px 30px;
                              "
                           >
                              <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: 230px; height: 230px">
                           <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: 848px; height: 180px; margin-top: -10px"></div>
                     <div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between">
                        <div style="width: 100px; height: 20px">{{ realData.dryTime | 0 }} min</div>
                        <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
                     </div>
                     <div id="progressBar" style="width: 848px; 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> -->
               </div>
               <div class="rightInfo">
                  <div class="rightTop">
                     <dv-border-box7 class="tempMoisChart">
                        <div :id="'moisChart'" style="width: 690px; height: 420px"></div>
                     </dv-border-box7>
                  </div>
                  <div class="rightTwo">
                     <dv-border-box7 class="infoChart">
                        <div class="chartTittle">
                           å¹²ç‡¥æ•ˆçŽ‡(kg/h)
                           <div class="rightLabel">
                              <div class="label good">&gt;{{ standard.xiaolv }} ä¼˜ </div>
                              <div class="label bad">&lt;{{ standard.xlMin }} å·®</div>
                           </div>
                        </div>
                        <div class="outDiv" style="padding-top: 20px">
                           <div class="leftData">
                              <div class="center" style="height: 50%">
                                 <div class="centerText">
                                    <div class="mainInfo3"
                                       ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span> kg
                                    </div>
                                    <div class="subhead2">水分蒸发</div>
                                 </div>
                              </div>
                              <div class="center" style="height: 50%">
                                 <div>
                                    <div class="mainInfo3">{{ realData?.dryTime | 0 }} min</div>
                                    <div class="subhead2">干燥用时</div>
                                 </div>
                              </div>
                           </div>
                           <div class="rightChart center">
                              <div class="center compareBar">
                                 <div class="barTop">{{ standard.xiaolv }}</div>
                                 <div class="barBack">
                                    <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
                                 </div>
                                 <div style="line-height: 20px">
                                    é¢å®š
                                    <br />
                                    æ•ˆçŽ‡
                                 </div>
                              </div>
                              <div class="center compareBar">
                                 <div class="barTop">{{ realData?.xiaolv | 0 }}</div>
                                 <div class="barBack">
                                    <div
                                       class="barDiv"
                                       :class="{ good: realData?.xlgood, bad: realData?.xlbad }"
                                       :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]"
                                    >
                                    </div>
                                 </div>
                                 <div style="line-height: 20px">
                                    å®žæ—¶
                                    <br />
                                    æ•ˆçŽ‡
                                 </div>
                              </div>
                           </div>
                        </div>
                     </dv-border-box7>

                     <dv-border-box7 class="infoChart">
                        <div class="chartTittle"
                           >蒸汽消耗(m³/kg)
                           <div class="rightLabel">
                              <div class="label bad">&gt;{{ standard.zhengqi }} å·®</div>
                              <div class="label good">&lt;{{ standard.zqMin }} ä¼˜</div>
                           </div>
                        </div>
                        <div class="outDiv" style="padding-top: 20px">
                           <div class="leftData">
                              <div class="center" style="height: 100%">
                                 <div class="centerText">
                                    <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">{{ standard.zhengqi }}</div>
                                 <div class="barBack">
                                    <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
                                 </div>
                                 <div style="line-height: 20px">
                                    é¢å®š
                                    <br />
                                    æ¶ˆè€—
                                 </div>
                              </div>
                              <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>
                                 <div style="line-height: 20px">
                                    å®žæ—¶
                                    <br />
                                    æ¶ˆè€—
                                 </div>
                              </div>
                           </div>
                        </div>
                     </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: 250px"></div>
                        </div>
                     </dv-border-box7>
                     <dv-border-box7 class="infoChart">
                        <div class="chartTittle">
                           <div> ç”µèƒ½æ¶ˆè€—(kWh/kg)</div>
                           <div class="rightLabel">
                              <div class="label bad">&gt;{{ standard.dian }} å·®</div>
                              <div class="label good">&lt;{{ standard.dMin }} ä¼˜</div>
                           </div>
                        </div>
                        <div class="outDiv" style="padding-top: 20px">
                           <div class="leftData">
                              <div class="center" style="height: 100%">
                                 <div class="centerText">
                                    <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">{{ standard.dian }}</div>
                                 <div class="barBack">
                                    <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
                                 </div>
                                 <div style="line-height: 20px">
                                    é¢å®š
                                    <br />
                                    æ¶ˆè€—
                                 </div>
                              </div>
                              <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>
                                 <div style="line-height: 20px">
                                    å®žæ—¶
                                    <br />
                                    æ¶ˆè€—
                                 </div>
                              </div>
                           </div>
                        </div>
                     </dv-border-box7>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </dv-full-screen-container>
</template>

<script setup lang="ts">
   import { useFullscreen } from '@vueuse/core'
   import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
   import { router } from '/@/router'
   import { onMounted, ref, onUnmounted } from 'vue'
   import { Progress } from 'ant-design-vue'
   import * as echarts from 'echarts'
   import 'echarts-liquidfill'
   import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
   import { defHttp } from '/@/utils/http/axios'
   import { queryById, listAll } from '../api/DryEquipment.api'
   import { dryEquipment } from '../dataDefine/DryEquipment.data'
   import { useUserStore } from '/@/store/modules/user'
   import { getTenantId, getToken } from '/@/utils/auth'

   const domRef = ref<Nullable<HTMLElement>>(null)
   const { enter, toggle, exit, isFullscreen } = useFullscreen()

   const { toggle: toggleDom } = useFullscreen(domRef)
   const Timer = ref()
   const Timer2 = ref()
   const marks = ref<Record<number, any>>({
      0: '0°C',
      1: '',
      2: '',
      3: '',
      4: '',
      5: '',
      6: '',
      7: '',
      8: '',
      9: '',
      10: '',
      11: '',
      12: '',
      13: '',
      14: '',
      15: '',
      16: '',
      17: '',
      18: '',
      19: '',
      20: '',
      21: '',
      22: '',
      23: '',
      24: '',
      25: '25°C',
      26: '',
      27: '',
      28: '',
      29: '',
      30: '',
      31: '',
      32: '',
      33: '',
      34: '',
      35: '',
      36: '',
      37: '',
      38: '',
      39: '',
      40: '',
      41: '',
      42: '',
      43: '',
      44: '',
      45: '',
      46: '',
      47: '',
      48: '',
      49: '',
      50: '50°C',
      51: '',
      52: '',
      53: '',
      54: '',
      55: '',
      56: '',
      57: '',
      58: '',
      59: '',
      60: '',
      61: '',
      62: '',
      63: '',
      64: '',
      65: '',
      66: '',
      67: '',
      68: '',
      69: '',
      70: '',
      71: '',
      72: '',
      73: '',
      74: '',
      75: '75°C',
      76: '',
      77: '',
      78: '',
      79: '',
      80: '',
      81: '',
      82: '',
      83: '',
      84: '',
      85: '',
      86: '',
      87: '',
      88: '',
      89: '',
      90: '',
      91: '',
      92: '',
      93: '',
      94: '',
      95: '',
      96: '',
      97: '',
      98: '',
      99: '',
      100: '100°C',
   })
   const eqps = ref([] as dryEquipment[])
   console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query)
   const eqp = ref({} as dryEquipment)
   const eqpNum = ref(router.currentRoute.value.query.num || 1)
   const userStore = useUserStore()
   const realData = ref({})
   const standard = ref({
      xiaolv: 220,
      xlMin: 200,
      zhengqi: 50,
      zqMin: 45,
      dian: 8,
      dMin: 7.5,
   })

   const position = ref(1)
   //realData.value.tempValue = [0, 100]
   realData.value.mois = [0.5, 0.35, 0.2]
   statusGif = 'tmrefeng2'
   realData.value.herbImage = 'yaocai1.png'
   var moisChart: echarts.ECharts
   var waterChart: echarts.ECharts

   var bellowsTempChart: 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 progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
      let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
      // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
      let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement
      moisChart = echarts.init(chartDom)
      waterChart = echarts.init(waterDom)
      bellowsTempChart = echarts.init(bellowsTempDom)
      // fanFreqChart = echarts.init(fanFreqDom)
      progressBarChart = echarts.init(progressBarDom)
      efficiencyLineChart = echarts.init(efficiencyLineDom)
      compareChart = echarts.init(compaerDom)

      const option = {
         color: ['green', 'red'],
         title: {
            text: '含水率/温度趋势',
            textStyle: {
               color: '#fff',
               fontSize: 15,
            },
         },
         tooltip: {
            trigger: 'axis',
         },
         grid: {
            left: 50,
            right: 70,
            top: 50,
            bottom: 60,
         },
         legend: {
            right: 60,
            textStyle: {
               color: '#fff',
            },
         },
         // toolbox: {
         //    show: true,
         //    feature: {
         //       dataZoom: {
         //          yAxisIndex: 'none',
         //       },
         //       dataView: { readOnly: false },
         //       magicType: { type: ['line', 'bar'] },
         //       restore: {},
         //       saveAsImage: {},
         //    },
         // },
         xAxis: {
            type: 'value',
            axisLabel: {
               color: '#fff',
            },
            //boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            min: 0,
            max: function (value) {
               if (value.max < 100) {
                  return 100
               } else {
                  return value.max
               }
            },
            splitLine: {
               lineStyle: {
                  type: 'dashed',
                  color: ['#2b2b2b'],
               },
            },
         },
         yAxis: {
            type: 'value',
            boundaryGap: ['10%', '10%'],
            axisLabel: {
               color: '#fff',
            },
            splitLine: {
               lineStyle: {
                  type: 'dashed',
                  color: ['#2b2b2b'],
               },
            },
            // min: 0,
            // max: function (value) {
            //    if (value.max < 100) {
            //       return 100
            //    } else {
            //       return value.max
            //    }
            // },
         },
         // yAxis: {
         //    type: 'value',
         //    axisLabel: {
         //       formatter: '{value} Â°C',
         //    },
         // },
         series: [
            {
               name: '含水率',
               type: 'line',
               smooth: true,
               symbol: 'none',
               data: [
                  [1, 1],
                  [2, 2],
               ],
               lineStyle: {
                  width: 1,
               },
               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: '温度',
               type: 'line',
               smooth: true,
               symbol: 'none',
               data: [
                  [1, 10],
                  [2, 20],
               ],
               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: [
               //       { type: 'average', name: 'Avg' },
               //       [
               //          {
               //             symbol: 'none',
               //             x: '90%',
               //             yAxis: 'max',
               //          },
               //          {
               //             symbol: 'circle',
               //             label: {
               //                position: 'start',
               //                formatter: 'Max',
               //             },
               //             type: 'max',
               //             name: '最高点',
               //          },
               //       ],
               //    ],
               // },
            },
         ],
      }
      const waterOption = {
         series: [
            {
               type: 'liquidFill',
               radius: '100%',
               //waveAnimation: false,
               amplitude: 3,
               animationDuration: 5,
               //animationDurationUpdate: 0,
               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: {
                  show: false,
               },
               label: {
                  // formatter: function () {
                  //    //console.log(`output->params`,params,mois.value)

                  //    return (
                  //       '' +
                  //       // +'初始'+(mois.value[0]*100).toFixed(2) + '%\n\n\n'
                  //       (mois.value[1] * 100).toFixed(2) +
                  //       '%'
                  //       // + '\n\n\n目标'+(mois.value[2]*100).toFixed(2) + '%'
                  //    )
                  // },
                  fontSize: 20,
                  //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
               },
            },
         ],
      }

      const bellowsOption = {
         series: [
            {
               type: 'gauge',
               center: ['50%', '60%'],
               startAngle: 215,
               endAngle: -35,
               min: 0,
               max: 80,
               splitNumber: 8,
               itemStyle: {
                  color: '#FFAB91',
               },
               progress: {
                  show: true,
                  width: 10,
               },
               pointer: {
                  show: false,
               },
               axisLine: {
                  lineStyle: {
                     width: 10,
                  },
               },
               axisTick: {
                  distance: -15,
                  splitNumber: 5,
                  length: 3,
                  lineStyle: {
                     width: 1,
                     color: '#999',
                  },
               },
               splitLine: {
                  distance: -18,
                  length: 6,
                  lineStyle: {
                     width: 2,
                     color: '#999',
                  },
               },
               axisLabel: {
                  distance: -13,
                  color: '#fff',
                  fontSize: 12,
               },
               anchor: {
                  show: false,
               },
               title: {
                  show: false,
               },
               detail: {
                  valueAnimation: true,
                  width: '60%',
                  lineHeight: 40,
                  borderRadius: 8,
                  offsetCenter: [0, '0%'],
                  fontSize: 20,
                  fontWeight: 'bolder',
                  formatter: '{value}°C',
                  color: 'inherit',
               },
               data: [
                  {
                     value: 20,
                  },
               ],
            },
            {
               type: 'gauge',
               center: ['50%', '60%'],
               startAngle: 215,
               endAngle: -35,
               min: 0,
               max: 80,
               itemStyle: {
                  color: '#FD7347',
               },
               progress: {
                  show: true,
                  width: 3,
               },
               pointer: {
                  show: false,
               },
               axisLine: {
                  show: false,
               },
               axisTick: {
                  show: false,
               },
               splitLine: {
                  show: false,
               },
               axisLabel: {
                  show: false,
               },
               detail: {
                  show: false,
               },
               data: [
                  {
                     value: 20,
                  },
               ],
            },
         ],
      }

      // 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',
      //    //   subtext: 'Fake Data',
      //    //   left: 'center'
      //    // },
      //    color: ['#1595EA', '#2C4D90', '#FF7F7F'],
      //    tooltip: {
      //       trigger: 'item',
      //    },
      //    radius: [0, '85%'],
      //    // grid: {
      //    //    top: 20,
      //    //    left: 20,
      //    //    right: 20,
      //    //    bottom: 20,
      //    // },
      //    // legend: {
      //    //    orient: 'vertical',
      //    //    left: 'left',
      //    // },
      //    series: [
      //       {
      //          name: '重量数据',
      //          type: 'pie',
      //          radius: '50%',
      //          data: [
      //             { value: 1048, name: '剩余重量' },
      //             { value: 735, name: '烘去重量' },
      //          ],
      //          label: {
      //             show: false,
      //          },
      //          labelLine: {
      //             show: false,
      //          },
      //          emphasis: {
      //             itemStyle: {
      //                shadowBlur: 10,
      //                shadowOffsetX: 0,
      //                shadowColor: 'rgba(0, 0, 0, 0.5)',
      //             },
      //          },
      //       },
      //    ],
      // }

      const progressBarOption = {
         // tooltip: {
         //    trigger: 'axis',
         //    axisPointer: {
         //       // Use axis to trigger tooltip
         //       type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
         //    },
         // },
         // color: [
         //    '#0653F6',
         //    // '#1B61E7',
         //    '#3673D5',
         //    // '#4A80C8',
         //    '#608FB8',
         //    // '#719BAD',
         //    '#82A6A1',
         //    // '#8DAD9A',
         //    '#9CB790',
         //    // '#A7BE88',
         //    '#B3C681',
         //    '#CAD671',
         //    '#DBE165',
         // ],
         animation: false, // å…³é—­åŠ¨ç”»
         color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8', '#60FFFE', '#64FAFF', '#70FFFF', '#7BFFFF', '#88FFFD', '#97FFFF', '#A5FFFD', '#B1FFFF', '#BFFFFF', '#CAFFFF'],
         grid: {
            top: '12%',
            left: '20',
            right: '55',
            bottom: '3%',
            containLabel: true,
         },
         xAxis: {
            min: 0,
            max: 150,
            show: false,
            type: 'value',
            axisLine: {
               show: false,
            },
            axisTick: {
               show: false,
            },
         },
         yAxis: {
            show: false,
            axisLine: {
               show: false,
            },
            axisTick: {
               show: false,
            },
            type: 'category',
            data: ['时间'],
         },
         series: [
            // {
            //    name: '第一阶段',
            //    type: 'bar',
            //    stack: 'total',
            //    label: {
            //       show: true,
            //    },
            //    barWidth: 26,
            //    emphasis: {
            //       focus: 'series',
            //    },
            //    data: [30],
            // },
            // {
            //    name: '第二阶段',
            //    type: 'bar',
            //    stack: 'total',
            //    label: {
            //       show: true,
            //    },
            //    emphasis: {
            //       focus: 'series',
            //    },
            //    data: [30],
            // },
            // {
            //    name: 'Affiliate Ad',
            //    type: 'bar',
            //    stack: 'total',
            //    label: {
            //       show: true,
            //    },
            //    emphasis: {
            //       focus: 'series',
            //    },
            //    data: [20],
            // },
            // {
            //    name: 'Video Ad',
            //    type: 'bar',
            //    stack: 'total',
            //    label: {
            //       show: true,
            //    },
            //    emphasis: {
            //       focus: 'series',
            //    },
            //    data: [15],
            // },
            // {
            //    name: 'Search Engine',
            //    type: 'bar',
            //    stack: 'total',
            //    label: {
            //       show: true,
            //    },
            //    emphasis: {
            //       focus: 'series',
            //    },
            //    data: [10],
            // },
            // {
            //    name: 'df Engine',
            //    type: 'bar',
            //    stack: 'total',
            //    label: {
            //       show: true,
            //    },
            //    emphasis: {
            //       focus: 'series',
            //    },
            //    data: [5],
            // },
            // {
            //    name: 'df Engine',
            //    type: 'bar',
            //    stack: 'total',
            //    label: {
            //       show: true,
            //    },
            //    emphasis: {
            //       focus: 'series',
            //    },
            //    data: [5],
            // },
            // {
            //    name: 'df Engine',
            //    type: 'bar',
            //    stack: 'total',
            //    label: {
            //       show: true,
            //    },
            //    emphasis: {
            //       focus: 'series',
            //    },
            //    data: [
            //       {
            //          value: 35,
            //          itemStyle: {
            //             color: '#c0c0c0',
            //          },
            //       },
            //    ],
            // },
         ],
      }

      const efficiencyLineOption = {
         title: {},
         tooltip: {
            trigger: 'axis',
         },
         grid: {
            top: '30%',
            left: '17',
            right: '57',
            bottom: '0%',
            containLabel: true,
         },
         legend: {
            right: 60,
            textStyle: {
               color: '#fff',
            },
         },
         xAxis: {
            show: false,
            axisLine: {
               show: false,
            },
            axisTick: {
               show: false,
            },
            type: 'value',
            min: 0,
            max: 150,
            // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1],
         },
         yAxis: {
            show: false,
            axisLine: {
               show: false,
            },
            axisTick: {
               show: false,
            },
            type: 'value',
            axisLabel: {
               formatter: '{value} Â°C',
            },
            // max: standard.value.xiaolv + 3,
         },
         series: [
            {
               name: '干燥效率',
               type: 'line',
               lineStyle: {
                  width: 1,
               },
               // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
               data: [
                  [0, 1],
                  [15, 10],
                  [45, 11],
                  [70, 6],
               ],
               markPoint: {
                  data: [
                     { type: 'max', name: 'Max' },
                     { type: 'min', name: 'Min' },
                  ],
               },
               markLine: {
                  symbol: 'none',
                  data: [
                     {
                        name: '额定',
                        yAxis: standard.value.xiaolv,
                     },
                  ],
                  label: {
                     formatter: '{b}\n{c}',
                     color: '#fff',
                  },
               },
               // markLine: {
               //    data: [{ type: 'average', name: 'Avg' }],
               // },
            },
         ],
      }

      const compareOption = {
         tooltip: {
            trigger: 'axis',
         },
         grid: {
            top: '6%',
            left: '3%',
            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)

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

   // åŠ¨æ€è¯»å–图片
   function getHerbImageUrl(name: string) {
      return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href
   }

   // åŠ¨æ€è¯»å–图片
   function getStatusImageUrl(name: string) {
      if (name =='zanting') {
         return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href
      } else {
         return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href
      }
		
   }
   function queryEqp() {
      queryById({ id: router.currentRoute.value.params.id }).then((res) => {
         // console.log(`output->res`, res)
         eqp.value = res
         queryRealTime()
         setTimeout(initCharts, 500)
      })
   }

   function listAllEqp() {
      listAll({ enable: 'Y' })
         .then((result) => {
            //console.log(`output->result`, result)
            eqps.value = result
            // result.forEach((item) => {
            //    eqpCodes.push(item.code)
            // })
            queryRealTime()
            setTimeout(initCharts, 500)
         })
         .catch((err) => {
            //console.log(`output->err`, err)
         })
   }

   var num = eqpNum.value

   function changeEqp() {
      //console.log("changeEqp::",eqps.value.length);
      num++
      if (eqps.value.length > 0) {
         var i = num % eqps.value.length
         //eqp.value = eqps.value[i]
         //  console.log("777",i);
         eqpNum.value = i
         //console.log("888",eqp.value);
         queryRealTime()
         //setTimeout(initCharts, 500)
      }
   }

   // function queryEqpsReal() {

   //     if (eqps.value.length > 0) {
   //         var i = num%eqps.value.length
   //         eqp.value = eqps[i]
   //         console.log("777",i);
   //         console.log("888",eqp.value);
   //         queryRealTime()
   //       //setTimeout(initCharts, 500)
   //     }
   //     num ++;
   // }

   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)
         }, 7000)
      }, 15000)
   }

   function queryRealTime() {
      if (eqp.value) {
         eqp.value = eqps.value[eqpNum.value]
         // console.log("888",eqp.value);
         let tenantId = getTenantId()
         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)
               //   res.tempValue = [res.windTemp, 100]
               //res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
               /**水滴图含水量 */
               res.mois = [
                  (res.trendVo.moisture / 100).toFixed(2),
                  (res.trendVo.moisture / 100 / 1.5).toFixed(2),
                  (res.trendVo.moisture / 100 / 3).toFixed(2),
               ]
               if (waterChart) {
                  waterChart.setOption({
                     series: [
                        {
                           data: res.mois,
                           label: {
                              formatter: function () {
                                 return res.trendVo.moisture + '%'
                              },
                              fontSize: 20,
                           },
                        },
                     ],
                  })
               }

               /**温度环形图 */
               if (bellowsTempChart) {
                  bellowsTempChart.setOption({
                     series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }],
                  })
               }
               /**风机频率环形图 */
               // if (fanFreqChart) {
               //    fanFreqChart.setOption({
               //       series: [
               //          {
               //             data: [
               //                {
               //                   value: res.trendVo.fanFrequency,
               //                },
               //             ],
               //          },
               //       ],
               //    })
               // }
               /**干燥进度、走势与阶段效率和阶段消耗 */
               if (res && res.detailList) {
                  var progressSeries = []
                  var ganZaoXiaoLv = []
                  var zhengQiXiaoHao = []
                  var dianNengXiaoHao = []
                  var totalTime = 1
                  var beforeWeight = 0
                  res.moisList = []
                  beforeWeight = res.originWeight
                  //console.log(`output->res`, res)
                  res.detailList.forEach((item) => {
                     //console.log(`output->bef`, beforeWeight)
                     //console.log(`output->cur`, item.weight)
                     res.moisList.push([item.totalTime, item.moisture])
                     //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                     var curDryTime = item.totalTime - totalTime

                     if (curDryTime > 0) {
                        progressSeries.push({
                           name: item.moisture,
                           type: 'bar',
                           stack: 'total',
                           label: {
                              show: true,
                           },
                           emphasis: {
                              focus: 'series',
                           },
                           data: [item.totalTime - totalTime],
                        })
                        ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])

                        totalTime = item.totalTime
                     }
                     beforeWeight = item.weight
                  })

                  if (res.remain) {
                     if (res.dryTime - totalTime > 0) {
                        progressSeries.push({
                           name: '当前',
                           type: 'bar',
                           stack: 'total',
                           label: {
                              show: true,
                           },
                           emphasis: {
                              focus: 'series',
                           },
                           data: [
                              {
                                 value: res.dryTime - totalTime,
                              },
                           ],
                        })
                     }

                     // ganZaoXiaoLv.push([totalTime + res.remain,standard.value.xiaolv])
                     // console.log(`output->res.remain`, res.remain)
                     // console.log(`output->res.dryTime`, res.dryTime)
                     // console.log(`output->totalTime`, totalTime)
                     // å¹²ç‡¥å‰©ä½™æ—¶é—´=工单预计剩余-（当前干燥时间-最后一次记录干燥时间）
                     res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0
                     progressSeries.push({
                        name: '剩余',
                        type: 'bar',
                        stack: 'total',
                        label: {
                           show: true,
                        },
                        emphasis: {
                           focus: 'series',
                        },
                        data: [
                           {
                              value: res.remain - (res.dryTime - totalTime),
                              itemStyle: {
                                 color: '#c0c0c0',
                              },
                           },
                        ],
                     })
                  }

                  /**干燥进度 */
                  if (progressBarChart) {
                     //console.log(`output->progressSeries`, progressSeries)
                     progressBarChart.setOption(
                        {
                           xAxis: {
                              max: totalTime + res.remain,
                           },
                           series: progressSeries,
                        },
                        { replaceMerge: ['series'] }
                     )
                  }

                  res.totalTime = totalTime + res.remain
                  /**干燥效率、消耗 */
                  if (efficiencyLineChart) {
                     //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
                     efficiencyLineChart.setOption({
                        xAxis: {
                           max: totalTime + res.remain,
                        },
                        series: [
                           {
                              data: ganZaoXiaoLv,
                              markLine: {
                                 symbol: 'none',
                                 data: [
                                    {
                                       name: '额定',
                                       yAxis: standard.value.xiaolv,
                                    },
                                 ],
                                 label: {
                                    formatter: '{b}\n{c}',
                                    color: '#fff',
                                 },
                              },
                           },
                           { data: zhengQiXiaoHao },
                           { data: dianNengXiaoHao },
                        ],
                     })
                  }

                  res.moisList.push([res.dryTime, res.trendVo.moisture])
               }

               /**温度趋势 */
               if (res && res.bellowsTemp) {
                  Array.from(Object.entries(res.bellowsTemp))
                  var arr = Object.keys(res.bellowsTemp)
                  var temArr = []
                  arr.forEach((item) => {
                     temArr.push([item * 1, res.bellowsTemp[item]])
                  })

                  //console.log(`output->arr` + JSON.stringify(temArr))
                  res.tempArr = temArr
               }

               /**干燥过程趋势 */
               if (moisChart) {
                  //console.log(`output->更新chart`)
                  moisChart.setOption({
                     series: [
                        {
                           data: res.moisList,
                           markLine: {
                              symbol: 'none',
                              data: [
                                 {
                                    name: '目标',
                                    yAxis: res.target,
                                 },
                              ],
                              label: {
                                 formatter: '{b}\n{c}%',
                                 color: '#fff',
                              },
                           },
                        },
                        {
                           data: res.tempArr,
                        },
                     ],
                  })
               }

               /**效率对比图 */
               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 + '%'
                  res.xlrHeight = '100%'
               } else if (res.xiaolv < standard.value.xlMin) {
                  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 + '%'
               }

               /** è’¸æ±½æ¶ˆè€— */
               if (res.originWeight - res.yield <= 0) {
                  res.zhengqi = standard.value.zhengqi - 3
               } else {
                  res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
               }
               res.zhengqi = standard.value.zhengqi - 3
               console.log(res);
               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)
               }
               res.dian = standard.value.dian - 1.5
               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 + '%'
               }

               //console.log('state:::fan::', res.state_fan, 'roller::', res.state_roller, 'windbox::', res.state_windbox)
               //console.log('===========================')
               //console.log("state:::state_windbox::", res.state_windbox);

               /**状态/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) {
                     statusTxt = res.level
                     statusGif = 'zanting'
                     if (res.level === '准备阶段') {
                        console.log("准备阶段" + statusGif);
                        statusGif = 'zanting'
                     } else if (res.level === '干燥阶段' || res.level === '正在干燥') {
                        statusGif = 'tmrefeng2'
                     } else if (res.level === '翻料阶段') {
                        statusGif = 'fanliao-N'
                     } else if (res.level === '出料阶段') {
                        statusGif = 'chuliao-N'
                     }
                     // 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
               if (res.fault) {
                  res.isError = true
                  res.errorMsg = res.fault
               }

               if (res.warning) {
                  res.isWarning = true
                  res.warnMsg = res.warning
               }
            } else {
               res = {
                  mois: [],
                  gif: 'tmrefeng2',
                  herbImage: 'yaocai1.png',
               }
            }

            //console.log(`output->res`, res)
            realData.value = res
         })
      }
   }

   var move = true
   function moveImage() {
      if (move) {
         position.value -= 0.3
      } else {
         position.value += 0.3
      }
      if (position.value < -240) {
         move = false
      }
      if (position.value > -1) {
         move = true
      }
   }

   function back() {
      router.back()
   }

   listAllEqp()
   //queryEqp()
   // DOM挂载完成后渲染图表
   onMounted(() => {
      Timer.value = setInterval(queryRealTime, 3000)
      Timer2.value = setInterval(moveImage, 50)
   })

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

<style scoped>
   .eqpBox {
      height: 100%;
   }
   .eqpRow {
   }
   .eqpImage {
      height: 1080px;
      width: 1920px;
      background-image: url(/src/assets/images/dry/bg.png);
      background-repeat: no-repeat;
      color: white;
      /*background-position: 160px 280px; */
      /* background-color: red; */
      background-size: 120%;
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
   }

   .leftEqp {
      height: 1080px;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      /* background-color: white;
      background-image: url(/src/assets/images/dry/shebei1.png);
      background-repeat: no-repeat;
      background-size: 125%;
      border-radius: 10px;
      background-position: -119px 293px; */
   }

   .leftTop {
      height: 750px;
      width: 850px;
      display: flex;
      justify-content: center;
      align-content: flex-start;
      background-image: url(/src/assets/images/dry/ganzaoji-x.png);
      background-repeat: no-repeat;
      background-size: 79%;
      border-radius: 10px;
      flex-wrap: wrap;
      background-position: 85px 279px;
   }
   .leftMid {
      width: 850px;
      height: 300px;
      /* border: 1px solid; */
      margin-top: 10px;
      border-radius: 10px;
      /* background: white; */
   }
   .mainInfo {
      line-height: 33px;
      padding-left: 10px;
      font-size: 30px;
      color: white;
   }
   .subhead {
      color: #a19f9c;
      font-size: 16px;
      padding-left: 10px;
   }

   .mainInfo2 {
      line-height: 20px;
      padding-left: 0px;
      font-size: 16px;
   }
   .subhead2 {
      color: #a19f9c;
      font-size: 10px;
      padding-left: 0px;
   }
   .zhengqi {
      height: 180px;
      width: 200px;
      background-image: url(/src/assets/images/dry/liuliangji.png);
      background-repeat: no-repeat;
      background-size: 160px;
      /* border-radius: 10px; */
      background-position: 17px -6px;
   }

   .liuliangji {
   }
   .leftData {
      height: 250px;
      width: 120px;
   }
   .rightChart {
      height: 270px;
      width: 170px;
      margin-top: -30px;
   }
   .leftTop0 {
      height: 600px;
      width: 848px;
      display: flex;
      justify-content: center;
      align-content: flex-start;
      flex-wrap: wrap;
   }
   .leftTop1 {
      width: 250px;
      height: 200px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #727272;
   }
   .leftTop2 {
      width: 250px;
      height: 200px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #727272;
   }
   .leftTop3 {
      width: 340px;
      height: 200px;
      /* background-image: url(/src/assets/images/dry/fanliao.gif); */
      background-repeat: no-repeat;
      background-position: 0px 20px;
      background-size: 300px;
      border-radius: 50px;
   }

   .eqpStatus {
      width: 848px;
		
   }
   .rightInfo {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      height: 1060px;
      width: 700px;
   }

   .rightTop {
      display: flex;
      height: 440px;
      padding-left: 10px;
   }
   .rightTwo {
      display: flex;
      flex-wrap: wrap;
   }

   .infoChart {
      width: 340px;
      height: 300px;
      /* background: white; */
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 10px;
   }
   .chartTittle {
      width: 340px;
      height: 30px;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      padding: 15px 15px;
   }
   .chartInfo {
      width: 60px;
      height: 180px;
   }

   .compareBar {
      width: 55px;
      height: 140px;
   }
   .margintop-30 {
      margin-top: -30px;
   }

   .barTop {
      width: 55px;
      height: 30px;
   }
   .barBack {
      width: 30px;
      height: 100px;
      /* border: 1px solid black; */
      display: flex;
      flex-wrap: wrap;
      align-content: flex-end;
   }
   .barDiv {
      width: 100%;

      background-color: #1595ea;
   }
   .bad {
      background-color: #973535;
   }
   .rightLabel {
      width: 110px;
      display: flex;
      justify-content: space-between;
   }
   .label {
      color: white;
      text-align: center;
      width: 50px;
      border-radius: 4px;
      height: 20px;
      font-size: 10px;
      line-height: 21px;
   }
   .good {
      background-color: #0d6e24;
   }

   .mainInfo3 {
      font-size: 24px;
   }
   .herbInfo {
      width: 340px;
      height: 440px;
      color: #727272;
   }

   .curEqp {
      width: 340px;
      height: 170px;

      /* background: white;
      border-radius: 10px; */
   }
   .curHerb {
      margin-top: 10px;
      width: 340px;
      height: 260px;
      /* background: white;
      border-radius: 10px; */

      background-repeat: no-repeat;
      background-size: 200px;
      background-position: 0px 10px;
   }
   .tempMoisChart {
      width: 690px;
      height: 440px;
      /* background: white; */

      padding: 20px;
      border-radius: 10px;
   }
   .topLeft {
      margin: 20px 40px 60px 20px;
      padding: 15px;
      /* background: white; */
      border-radius: 10px;
      height: 325px;
      width: 440px;
      /* background-image: url(/src/assets/images/dry/yaocai.jpg); */
      background-repeat: no-repeat;
      background-size: 164px 132px;
      background-position: 239px 65px;
      display: flex;
   }
   .topMid {
      margin: 20px 20px 60px 40px;
      /* background: white; */
      border-radius: 10px;
      background-image: url(/src/assets/images/dry/fanliao.gif);
      background-repeat: no-repeat;
      background-position: 0px 20px;
      background-size: 400px;
      width: 400px;

      padding: 20px;
   }
   .topRight {
      margin: 20px 20px 60px 20px;
      /* background: white; */
      border-radius: 10px;
      width: 700px;
      padding: 20px;
   }
   .midLeft {
      height: 450px;
      width: 600px;
      display: flex;
      padding: 0 20px 20px 20px;
   }
   .midMid {
      width: 500px;
      padding-top: 50px;
   }

   .midRight {
      background-image: url(/src/assets/images/dry/fengjixz.gif);
      background-repeat: no-repeat;
      background-position: 150px 260px;
      background-size: 120px 120px;
      width: 600px;
   }

   .shangJianTou {
      margin-left: 140px;
      width: 70px;
      height: 100px;
      background-image: url(/src/assets/images/dry/shangjiantoutou.gif);
      background-repeat: no-repeat;
      background-position: 0px 0px;
      background-size: 70px 100px;
   }

   .zoujiantou {
      margin-left: 225px;
      margin-top: 30px;
      width: 100px;
      height: 70px;
      background-image: url(/src/assets/images/dry/zuojiantou.gif);
      background-repeat: no-repeat;
      background-position: 0px 0px;
      background-size: 100px 70px;
   }
   .fault {
      padding: 10px;
      height: 60px;
      font-size: 26px;
      width: 100%;
      text-align: right;
      color: red;
   }
   .eqpName {
      padding: 20px;

      height: 160px;
   }

   .formula {
      display: flex;
      width: 340px;
      height: 40px;
      padding: 0 20px;
      justify-content: space-around;
      justify-items: center;
   }

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

   .eqpInfoText {
      font-size: 18px;
      font-weight: bold;
   }

   :deep() .ant-slider-mark-text {
      padding-left: 15px;
      font-size: 10px;
   }
   :deep() .ant-slider-mark-text::before {
      content: '';
      display: block;
      width: 6px;
      height: 1px;
      background-color: #1890ff;

      position: absolute;
      top: 10px;
      left: 0px;
   }
   :deep() .ant-slider-rail {
      width: 10px !important;
      border-radius: 6px 6px 0 0;
      background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%);
   }
   :deep() .ant-slider-track {
      background: rgb(216, 216, 216);

      height: 20px;
      width: 10px !important;
      border-radius: 6px 6px 0 0;
   }
   :deep() .ant-slider-track:hover {
   }
   :deep() .ant-slider-handle {
      display: none;
   }
   :deep() .ant-slider-dot {
      display: none;
   }
   :deep() .ant-slider-step {
      width: 10px !important;
   }
   :deep() .ant-slider-step > :first-child {
      display: block !important;
      width: 30px !important;
      height: 30px !important;
      bottom: -26px !important;
      left: -6px;
      border: none;
      background: #ce0000;
   }
   :deep() .progress {
      padding: 25px 25px;

      width: 360px;
      display: flex;
   }
   :deep() .ant-progress-bg {
      height: 25px !important;
   }
   .outDiv {
      display: flex;
      justify-content: center;
      justify-items: center;
   }
   .blingbling {
      -webkit-animation: scaleout 1.5s infinite ease-in-out;
      animation: scaleout 1.5s infinite ease-in-out;
   }
   .center {
      display: flex;
      justify-content: center;
      justify-items: center;
      align-items: center;
      flex-wrap: wrap;
      text-align: center;
   }

   .centerText {
      width: 100%;
      text-align: center;
   }

   @-webkit-keyframes scaleout {
      0% {
         -webkit-transform: scale(1);
      }

      100% {
         -webkit-transform: scale(1.1);
         opacity: 0;
      }
   }

   @keyframes scaleout {
      0% {
         transform: scale(1);
         -webkit-transform: scale(1);
      }

      100% {
         transform: scale(1.1);
         -webkit-transform: scale(1.1);
         opacity: 0;
      }
   }
</style>