完成车间大屏

baoshiwei

2023-08-01 3efe2606474fba1905fa4edab82b713b9cfb5ef3

 src/views/dry/bigScreen/BigEqp.vue

@@ -3,22 +3,25 @@
   <div class="eqpBox">
      <div class="eqpRow">
         <div class="eqpImage"  :style="{'background-position':position + 'px'}">
				
            <div class="leftEqp">
               <div style="width: 350px;  ">
                  <div style="width: 350px">
               <div class="herbInfo">
						
                     <dv-border-box7 class="curEqp">
                        <div class="eqpName" style="padding: 30px" @click="changeEqp">
                           <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:300px;height:90px; margin-left: 20px;" />
                                 <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: 176px; height: 190px">
                           <div class="eqpName" style="margin-left: 156px; height: 190px">
                           <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
                           <div class="subhead">干燥配方</div>
                        </div>
@@ -55,15 +58,14 @@
                        <div id="fanFreq" style="width: 240px; height: 240px"></div>
                     </div>
                  </dv-border-box7> -->
                  <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                     <dv-border-box7 class="infoChart" style="margin-left: 0px">
                     <div class="chartTittle">含水率</div>
                     <div class="outDiv" style="padding-top: 20px">
                        <div class="leftData">
                           <div class="center" style="height: 50%">
                              <div class="centerText">
                                 <div class="mainInfo3"
                                    ><span>{{ realData?.target }}</span
                                    > %
                                       ><span>{{ realData?.target }}</span> %
                                 </div>
                                 <div class="subhead2">目标含水率</div>
                              </div>
@@ -71,8 +73,7 @@
                           <div class="center" style="height: 50%">
                              <div>
                                 <div class="mainInfo3"
                                    ><span>{{ realData?.initial }}</span
                                    > %</div
                                       ><span>{{ realData?.initial }}</span> %</div
                                 >
                                 <div class="subhead2">来料含水率</div>
                              </div>
@@ -80,7 +81,7 @@
                        </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>
                        <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">实时含水率</div>
                  </dv-border-box7>
            </div>
               <dv-border-box7 class="leftTop">
@@ -117,7 +118,8 @@
                     >
                     {{ statusTxt }}
                     </div>
                     <div v-if="realData?.isError"
                           <div
                              v-if="realData?.isError"
                        class="eqpInfoText blingbling"
                        style="
                           position: absolute;
@@ -132,13 +134,15 @@
                     >
                        <div class="outDiv">
                           <div><Icon icon="bx:error" :size="30" /> </div>
                           <div><span>{{realData?.errorMsg}}</span></div>
                                 <div
                                    ><span>{{ realData?.errorMsg }}</span></div
                                 >
                        </div>
                     </div>
                  </div>
                  </div>
               </dv-border-box7>
               <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px;">
                  <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px">
                     <div class="chartTittle">风箱温度</div>
                     <div class="outDiv">
                        <div id="bellowsTemp" style="width: 230px; height: 230px">
@@ -148,7 +152,7 @@
                  </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 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">0 min</div>
                     <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
@@ -176,7 +180,6 @@
            </div>
            <div class="rightInfo">
               <div class="rightTop">
						
                  <dv-border-box7 class="tempMoisChart">
                     <div :id="'moisChart'" style="width: 690px; height: 420px"></div>
                  </dv-border-box7>
@@ -195,8 +198,7 @@
                           <div class="center" style="height: 50%">
                              <div class="centerText">
                                 <div class="mainInfo3"
                                    ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span
                                    > kg
                                       ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span> kg
                                 </div>
                                 <div class="subhead2">水分蒸发</div>
                              </div>
@@ -240,9 +242,6 @@
                     </div>
                  </dv-border-box7>
               
					
						
						
                  <dv-border-box7 class="infoChart">
                     <div class="chartTittle"
                        >蒸汽消耗(m³/kg)
@@ -255,7 +254,9 @@
                        <div class="leftData">
                           <div class="center" style="height: 100%">
                              <div class="centerText">
                                 <div class="mainInfo3"><span>{{realData?.steam}}</span> m³ </div>
                                    <div class="mainInfo3"
                                       ><span>{{ realData?.steam }}</span> m³
                                    </div>
                                 <div class="subhead2">蒸汽用量</div>
                              </div>
                           </div>
@@ -275,8 +276,12 @@
                           <div class="center compareBar">
                              <div class="barTop">{{realData?.zhengqi | 0 }}</div>
                              <div class="barBack">
                                 <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                    :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
                                    <div
                                       class="barDiv"
                                       :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                       :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"
                                    >
                                    </div>
                              </div>
                              <div style="line-height: 20px">
                                 实时
@@ -305,7 +310,9 @@
                        <div class="leftData">
                           <div class="center" style="height: 100%">
                              <div class="centerText">
                                 <div class="mainInfo3"><span>{{realData?.watt}}</span> kWh </div>
                                    <div class="mainInfo3"
                                       ><span>{{ realData?.watt }}</span> kWh
                                    </div>
                                 <div class="subhead2">电能用量</div>
                              </div>
                           </div>
@@ -325,8 +332,11 @@
                           <div class="center compareBar">
                              <div class="barTop">{{realData?.dian | 0}}</div>
                              <div class="barBack">
                                 <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                    :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
                                    <div
                                       class="barDiv"
                                       :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                       :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"
                                    ></div>
                              </div>
                              <div style="line-height: 20px">
                                 实时
@@ -337,7 +347,6 @@
                        </div>
                     </div>
                  </dv-border-box7>
						
               </div>
            </div>
         </div>
@@ -347,7 +356,7 @@
</template>

<script setup lang="ts">
  import { useFullscreen } from '@vueuse/core';
   import { useFullscreen } from '@vueuse/core'
   import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
   import { router } from '/@/router'
   import { onMounted, ref, onUnmounted } from 'vue'
@@ -360,13 +369,10 @@
   import { dryEquipment } from '../dataDefine/DryEquipment.data'
   import { useUserStore } from '/@/store/modules/user'

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


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

const { toggle: toggleDom } = useFullscreen(domRef);
   const { toggle: toggleDom } = useFullscreen(domRef)
   const Timer = ref()
    const Timer2 = ref()
   const marks = ref<Record<number, any>>({
@@ -473,9 +479,9 @@
      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(1)
   const eqpNum = ref(router.currentRoute.value.query.num || 1)
   const userStore = useUserStore()
   const realData = ref({})
   const standard = ref({
@@ -526,9 +532,8 @@
            text: '含水率/温度趋势',
            textStyle: {
               color: '#fff',
               fontSize: 15
               fontSize: 15,
            },
				
         },
         tooltip: {
            trigger: 'axis',
@@ -542,8 +547,8 @@
         legend: {
            right: 60,
            textStyle: {
               color: '#fff'
            }
               color: '#fff',
            },
         },
         // toolbox: {
         //    show: true,
@@ -560,7 +565,7 @@
         xAxis: {
            type: 'value',
            axisLabel:{
               color: '#fff'
               color: '#fff',
            },
            //boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -575,22 +580,22 @@
            splitLine: {
               lineStyle: {
                  type: 'dashed',
                  color: ['#2b2b2b']
               }
            }
                  color: ['#2b2b2b'],
               },
            },
         },
         yAxis: {
            type: 'value',
            boundaryGap: ['10%', '10%'],
            axisLabel:{
               color: '#fff'
               color: '#fff',
            },
            splitLine: {
               lineStyle: {
                  type: 'dashed',
                  color: ['#2b2b2b']
               }
            }
                  color: ['#2b2b2b'],
               },
            },
            // min: 0,
            // max: function (value) {
            //    if (value.max < 100) {
@@ -627,13 +632,13 @@
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: 'rgb(128, 255, 165)'
                        color: 'rgb(128, 255, 165)',
                  },
                  {
                     offset: 1,
                     color: 'rgb(1, 191, 236)'
                  }
                  ])
                        color: 'rgb(1, 191, 236)',
                     },
                  ]),
               },
            },
            {
@@ -653,13 +658,13 @@
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: 'rgb(255, 0, 135)'
                        color: 'rgb(255, 0, 135)',
                  },
                  {
                     offset: 1,
                     color: 'rgb(135, 0, 157)'
                  }
                  ])
                        color: 'rgb(135, 0, 157)',
                     },
                  ]),
               },
               // markLine: {
               //    data: [
@@ -1109,8 +1114,8 @@
         legend: {
            right: 60,
            textStyle: {
               color: '#fff'
            }
               color: '#fff',
            },
         },
         xAxis: {
            show: false,
@@ -1169,7 +1174,7 @@
                           ],
                           label: {
                              formatter: '{b}\n{c}',
                              color: '#fff'
                     color: '#fff',
                           },
                        },
               // markLine: {
@@ -1180,22 +1185,19 @@
      }

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


      option && moisChart.setOption(option)
      waterOption && waterChart.setOption(waterOption)
@@ -1237,12 +1238,12 @@

   // 动态读取图片
function getHerbImageUrl(name: string) {
  return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href;
      return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href
}

   // 动态读取图片
   function getStatusImageUrl(name: string) {
  return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href;
      return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href
}
   function queryEqp() {
      queryById({ id: router.currentRoute.value.params.id }).then((res) => {
@@ -1263,29 +1264,26 @@
            // })
            queryRealTime()
         setTimeout(initCharts, 500)
				
         })
         .catch((err) => {
            //console.log(`output->err`, err)
         })
   }


    var num = eqpNum.value;
   var num = eqpNum.value

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

    // function queryEqpsReal() {
@@ -1301,33 +1299,29 @@
    //     num ++;
    // }

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

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

   function shangliao() {
      statusGif = "shangliao-N"
      statusGif = 'shangliao-N'
      setTimeout(()=>{
         statusGif = "zhuangwangban"
         statusGif = 'zhuangwangban'
         setTimeout(()=>{
            statusGif = "guanmen1"
            statusGif = 'guanmen1'
            setTimeout(()=>{
               shangliaoFlag = false
            },4000)
				
         },7000)
      },15000)
   }


   function queryRealTime() {

        if (eqp.value) {
        eqp.value = eqps.value[eqpNum.value]
       // console.log("888",eqp.value);
@@ -1335,7 +1329,6 @@
      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]
@@ -1462,9 +1455,6 @@
                        },
                     ],
                  })



               }

               /**干燥进度 */
@@ -1489,7 +1479,9 @@
                     xAxis: {
                        max: totalTime + res.remain,
                     },
                     series: [{ data: ganZaoXiaoLv,
                        series: [
                           {
                              data: ganZaoXiaoLv,
                     markLine: {
                        symbol: 'none',
                           data: [
@@ -1500,11 +1492,13 @@
                           ],
                           label: {
                              formatter: '{b}\n{c}',
                              color: '#fff'
                                    color: '#fff',
                           },
                     } },
                              },
                           },
                      { data: zhengQiXiaoHao },
                       { data: dianNengXiaoHao }],
                           { data: dianNengXiaoHao },
                        ],
                  })
               }

@@ -1541,7 +1535,7 @@
                           ],
                           label: {
                              formatter: '{b}\n{c}%',
                              color: '#fff'
                                 color: '#fff',
                           },
                        },
                     },
@@ -1553,7 +1547,7 @@
            }

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


				
            /** 蒸汽消耗 */
            if( (res.originWeight - res.yield) <= 0) {
               if (res.originWeight - res.yield <= 0) {
               res.zhengqi = standard.value.zhengqi -3
            } else {
               res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
@@ -1594,10 +1586,8 @@
               res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
            }

				
				
            /** 电能消耗 */
            if( (res.originWeight - res.yield) <= 0) {
               if (res.originWeight - res.yield <= 0) {
               res.dian = standard.value.dian -1.5
            } else {
               res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
@@ -1608,7 +1598,6 @@
               res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
               res.dnrHeight = '100%'
            } else if (res.dian < standard.value.dMin) {
					
               res.dngood = true
               res.dnsHeight = '100%'
               res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
@@ -1617,8 +1606,8 @@
               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:::fan::', res.state_fan, 'roller::', res.state_roller, 'windbox::', res.state_windbox)
               //console.log('===========================')
            //console.log("state:::state_windbox::", res.state_windbox);

            /**状态/gif动图 */
@@ -1660,16 +1649,14 @@
            }
            }
            
				

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

@@ -1695,7 +1682,7 @@
            res = {
               mois: [],
               gif: 'tmrefeng2',
               herbImage: 'yaocai1.png'
                  herbImage: 'yaocai1.png',
            }
         }
         
@@ -1705,9 +1692,8 @@
    }
   }

    var move = true;
   var move = true
    function moveImage() {
       
        if (move) {
            position.value -= 0.3
        } else {
@@ -1719,8 +1705,10 @@
        if (position.value > -1) {
            move = true
        }
   }

        
   function back() {
      router.back()
    }

    listAllEqp()
@@ -1787,10 +1775,8 @@
    border-radius: 10px;
    flex-wrap: wrap;
    background-position: 85px 279px;

   }
   .leftMid {
		
      width: 850px;
      height: 300px;
      /* border: 1px solid; */
@@ -1858,7 +1844,6 @@
      align-items: center;
      font-size: 30px;
      color: #727272;
		
   }
   .leftTop2 {
      width: 250px;
@@ -1983,6 +1968,7 @@
   .curEqp {
      width: 340px;
      height: 170px;

      /* background: white;
      border-radius: 10px; */
   }