From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/dry/monitor/WorkShop.vue | 597 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 597 insertions(+), 0 deletions(-)
diff --git a/src/views/dry/monitor/WorkShop.vue b/src/views/dry/monitor/WorkShop.vue
new file mode 100644
index 0000000..10a219a
--- /dev/null
+++ b/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>
--
Gitblit v1.9.3