Merge remote-tracking branch 'origin/master'

baoshiwei

2024-05-27 fa3ac93010bea3805438ee3ab0a182bfbf7423da

 src/views/dry/monitor/WorkShop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,597 @@
<template>
   <div class="workshop">
      <div class="eqp-row">
         <div class="eqp-card" v-for="(item, index) in eqps" :key="index">
            <div class="eqp-content">
               <div class="chart">
                  <div>
                     <div class="progress">
                        <div style="">
                           <div>加热</div>
                           <div></div>
                           <span class="info-text">{{ realTime.get(item.id)?.dryTime | 0 }}</span> åˆ†é’Ÿ
                        </div>

                        <div style="padding: 0 10px; width: 195px; height: 40px">
                           <div style="padding-top: 10px">
                              <Progress
                                 :stroke-color="{
                                    from: '#108ee9',
                                    to: '#87d068',
                                 }"
                                 :percent="realTime.get(item.id)?.percent"
                                 status="active"
                                 trailColor="#2b2b2b2b"
                                 :show-info="false"
                              />
                           </div>
                        </div>

                        <div>
                           <div>预计 </div>
                           <div
                              ><span class="info-text">{{ (realTime.get(item.id)?.dryTime + realTime.get(item.id)?.remain) | 0 }}</span> åˆ†é’Ÿ
                           </div>
                        </div>
                     </div>
                     <div style="height: 50px; text-align: left; padding-left: 25px; display: flex">
                        <div class="herbInfo">
                           <div
                              >药材：<span class="info-text">{{ realTime.get(item.id)?.herbName }}</span></div
                           >
                           <div
                              >投料：<span class="info-text">{{ realTime.get(item.id)?.feed | 0 }}</span> ç­</div
                           >
                        </div>
                        <div class="herbInfo">
                           <div
                              >原始重量：<span class="info-text">{{ realTime.get(item.id)?.originWeight | 0 }}</span> Kg</div
                           >
                           <div
                              >实时重量：<span class="info-text">{{ realTime.get(item.id)?.yield | 0 }}</span> Kg</div
                           >
                        </div>
                     </div>
                  </div>

                  <div class="eqpStatus">
                     <div> <span class="info-text">正在干燥</span> </div>
                  </div>
               </div>
               <!-- <div :id="'chartDom' + item.id" class="chart"> </div> -->
               <div class="info">
                  <div class="leftInfo">
                     <div style="width: 120px">
                        <div style="height: 1px; font-size: 14px; text-align: center; margin-top: 10px; margin-bottom: -10px"
                           >初始：{{ realTime.get(item.id)?.initial }}%</div
                        >
                        <div :id="'moisture' + item.id" style="width: 110px; height: 187px"></div>
                        <div style="height: 1px; font-size: 14px; text-align: center; margin-top: -25px">目标：{{ realTime.get(item.id)?.target }}%</div>
                        <div style="width: 110px; text-align: center; margin-top: 23px">含水率</div>
                     </div>
                     <!-- <div class="herbName"> å½“å½’ </div> -->
                     <div style="flex: 1" @click="gotoEqp(item.id)"
                        ><div class="eqpName">{{ item.name }}</div></div
                     >
                  </div>
                  <div class="rightInfo">
                     <div class="tempChart" style="pointer-events: none; cursor: none" :id="'tempDom' + item.id">
                        <a-slider
                           v-if="realTime.get(item.id)"
                           v-model:value="realTime.get(item.id).tempValue"
                           :min="0"
                           range
                           :max="100"
                           :marks="marks"
                           vertical
                        />
                        <div class="info-text"
                           >热风：<span>{{ realTime.get(item.id)?.trendVo?.bellowsTemp | 0 }}</span> Â°C</div
                        >
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
   import { onMounted, ref, onUnmounted } from 'vue'
   import { Progress } from 'ant-design-vue'
   import * as echarts from 'echarts'
   import 'echarts-liquidfill'
   import { listAll } from '../api/DryEquipment.api'
   import { dryEquipment } from '../dataDefine/DryEquipment.data'
   import { router } from '/@/router'
   import { defHttp } from '/@/utils/http/axios'
   import { useUserStore } from '/@/store/modules/user'

   const eqps = ref([] as dryEquipment[])
   const mois = ref([0, 0, 0])
   const userStore = useUserStore()
   const Timer = ref()

   const realTime = ref(new Map())

   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',
   })
   function listAllEqp() {
      listAll({ enable: 'Y' })
         .then((result) => {
            console.log(`output->result`, result)
            eqps.value = result
            setTimeout(initCharts, 500)
            updateRealTime()
         })
         .catch((err) => {
            console.log(`output->err`, err)
         })
   }

   // var wetCharts: Map<string, echarts.ECharts> = new Map()

   var moistureCharts: Map<String, echarts.ECharts> = new Map()

   function initCharts() {
      //    console.log(`output->initChart`)
      eqps.value.forEach((item) => {
         //       console.log(`output->item.id`, item.id)
         let domId = 'moisture' + item.id
         //       console.log(`output->domId`, domId)
         var chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
         //       console.log(`output->chartDom`, chartDom)
         let myChart = echarts.init(chartDom)
         //   var option
         //           option = {
         //             grid: {
         //                left: 30,
         //                top: 15,
         //                bottom: 13,
         //                right: 45
         //             },
         //   xAxis: {
         //     type: 'category',
         //       show: false,
         //     data: ['含水率'],
         //       axisLine: {
         //          show: false,
         //       },
         //       axisTick: {
         //          show: false,
         //       }
         //   },
         //   yAxis: {
         //     type: 'value',

         //       axisLine: {
         //          show: false,
         //       },
         //       min: 0,
         //       max: 100,
         //       axisTick: {
         //          show: true,
         //       },
         //       splitLine: {
         //          show: false
         //       }
         //   },
         //   series: [
         //     {
         //       data: [20],
         //       type: 'bar',
         //       showBackground: true,
         //       backgroundStyle: {
         //         color: 'rgba(180, 180, 180, 0.2)'
         //       },
         //          label: {
         //             show: true,
         //          },
         //          barWidth: 20,
         //          markLine: {
         //             symbol: 'none',
         //             data: [
         //                {symbol: 'none',
         //                   xAxis:0,
         //                   x:60,
         //                   yAxis:60,

         //                   lineStyle:{
         //                      color: '#000',
         //                      width:1,

         //                   },
         //                   label: {
         //                      formatter: '初始\n'+ '{c}%'
         //                   }
         //                },
         //                {symbol: 'none',
         //                   xAxis:0,
         //                   x:60,
         //                   yAxis:11,

         //                   lineStyle:{
         //                      color: '#000',
         //                      width:1,

         //                   },
         //                   label: {
         //                      formatter: '目标\n'+ '{c}%'
         //                   }
         //                },

         //                // {yAxis: 0},
         //                // {yAxis: 100}
         //             ]
         //          }
         //     },

         //   ]
         // };
         const option = {
            series: [
               {
                  type: 'liquidFill',
                  radius: '100%',
                  //waveAnimation: false,
                  amplitude: 3,
                  animationDuration: 5,
                  //animationDurationUpdate: 0,
                  data: mois.value,
                  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: 14,
                     //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
                  },
               },
            ],
         }

         option && myChart.setOption(option)
         moistureCharts.set(item.id, myChart)
      })
   }

   function gotoEqp(id: string) {
      router.push('/dashboard/eqp/' + id)
   }

   function updateRealTime() {
      console.log(`output->定时刷新数据`)
      eqps.value.forEach((item) => {
         queryRealTime(item)
      })
   }

   function queryRealTime(eqp: dryEquipment) {
      let tenantId = userStore.getTenant
      let eqpCode = eqp.code
      let queryRealTimeUrl = '/dry/real/getRealTimeData'
      defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
         console.log(`output->res`, res)
         if (res && res.trendVo) {
            res.tempValue = [res.trendVo.bellowsTemp, 100]
            res.percent = ((res.dryTime / (res.dryTime + res.remain)) * 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),
            ]
            moistureCharts.get(eqp.id)?.setOption({
               series: [
                  {
                     data: res.mois,
                     label: {
                        formatter: function () {
                           return res.trendVo.moisture + '%'
                        },
                        fontSize: 14,
                        //position: ['50%',(100- res.trendVo.moisture)+ '%'],
                     },
                  },
               ],
            })
         } else {
            res = {
               tempValue: [0, 100],
               percent: 0,
               mois: [],
            }
         }

         realTime.value.set(eqp.id, res)
      })
   }

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

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

<style scoped>
   .workshop {
   }
   .eqp-row {
      display: flex;
      flex-wrap: wrap;
   }

   .eqp-card {
      width: 566px;
      height: 400px;
      padding: 6px 6px;
      flex-grow: 0;
      flex-shrink: 0;
   }

   .eqp-content {
      height: 100%;
      background-color: #fdfdfd;
      box-shadow: 0px 0px 23px #72727278;
      background-image: url(/src/assets/images/dry/ganzaoji-x.png);
      background-repeat: no-repeat;
      background-size: 60% 60%;
      background-position: 105px 127px;
      border-radius: 8px;
   }

   .chart {
      width: 550px;
      height: 160px;

      display: flex;
      text-align: center;
   }
   :deep() .progress {
      padding: 25px 25px;

      width: 360px;
      display: flex;
   }
   :deep() .ant-progress-bg {
      height: 25px !important;
   }
   .eqpStatus {
      width: 170px;
      background-position: -21px 19px;
      background-image: url(/src/assets/images/dry/refeng2.gif);
      background-size: 196px;
      background-repeat: no-repeat;
      display: inline-flex;
      flex-direction: column-reverse;
      padding: 15px;
   }
   .info {
      display: flex;
   }
   .leftInfo {
      width: 445px;
      display: flex;
      /* background: gray; */
   }
   .rightInfo {
      flex: 1;
      height: 210px;
      display: flex;
   }

   .info-text {
      font-size: 14px;
      font-weight: bold;
   }
   .herbName {
      margin-top: -10px;
      width: 180px;
      height: 35px;
      background: rgb(56, 56, 56);
      margin-left: 120px;
      text-align: center;
      color: white;
      font-size: 16px;
      font-weight: bold;
      line-height: 35px;
   }
   .eqpName {
      margin-top: 190px;
      margin-left: 58px;
      width: 205px;
      /* font-size: 14px; */
      font-weight: bold;
      text-align: center;
      background-color: white;
      height: 22px;
   }

   .tempChart {
      padding-top: 10px;

      height: 150px;
      width: 100px;
   }

   .herbInfo {
      width: 160px;
   }
   :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: 6px !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(175, 175, 175);

      height: 20px;
      width: 6px !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: 22px !important;
      height: 22px !important;
      bottom: -17px !important;
      left: -4px;
      border: none;
      background: #ce0000;
   }

	
   .blingbling {
      -webkit-transition: -webkit-transform 0.4s ease-in-out;
   transition: transform 0.4s ease-in-out;
		
   }
   .blingbling:hover {
      -webkit-transform: scale(1.1);
         transform: scale(1.1);
   }
</style>