From 34ff338ff4d6575f9a25457286b3a5aad6b8823b Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期三, 07 六月 2023 14:47:25 +0800
Subject: [PATCH] 增加车间监控和设备监控
---
src/views/dry/monitor/WorkShop.vue | 536 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 303 insertions(+), 233 deletions(-)
diff --git a/src/views/dry/monitor/WorkShop.vue b/src/views/dry/monitor/WorkShop.vue
index 7ec7ae1..3781483 100644
--- a/src/views/dry/monitor/WorkShop.vue
+++ b/src/views/dry/monitor/WorkShop.vue
@@ -1,87 +1,92 @@
<template>
<div class="workshop">
<div class="eqp-row">
- <div v-for="(item, index) in eqps" :key="index">
- <div class="eqp-card">
- <div class="eqp-content">
- <div class="chart">
- <div>
- <div class="progress">
- <div style="">
- <div>鍔犵儹</div>
- <div></div>
- <span class="info-text">36</span> 鍒嗛挓
- </div>
-
- <div style=" padding: 0 10px;width: 200px;height: 40px;">
-
- <div style="padding-top: 10px">
- <Progress
- :stroke-color="{
- from: '#108ee9',
- to: '#87d068',
- }"
- :percent="55.9"
- status="active"
- :show-info="false">
- </Progress>
- </div>
-
- </div>
-
- <div>
- <div>棰勮 </div>
- <div><span class="info-text">90</span> 鍒嗛挓
- </div>
- </div>
- </div>
- <div style="height:50px; text-align: left; padding-left: 25px; display: flex;">
- <div class="herbInfo">
- <div>鑽潗锛�<span class="info-text">褰撳綊</span></div>
- <div>鎶曟枡锛�<span class="info-text">16</span> 绛�</div>
+ <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 class="herbInfo">
- <div>鍘熷閲嶉噺锛�<span class="info-text">160</span> Kg</div>
- <div>瀹炴椂閲嶉噺锛�<span class="info-text">70</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 class="herbName"> 褰撳綊 </div> -->
- <div class="eqpName">{{ item.name }}</div>
+ <div style="padding: 0 10px; width: 200px; height: 40px">
+ <div style="padding-top: 10px">
+ <Progress
+ :stroke-color="{
+ from: '#108ee9',
+ to: '#87d068',
+ }"
+ :percent="realTime.get(item.id)?.percent"
+ status="active"
+ :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 class="rightInfo">
- <div style="width: 120px" >
- <div style=" height: 1px;
- font-size: 10px;
- text-align: center;
- margin-top: 10px;
- margin-bottom: -10px; ">鍒濆锛歿{ (mois[0] * 100).toFixed(2) }}%</div>
- <div :id="'moisture' + item.id" style="width: 110px; height: 187px"></div>
- <div style="height: 1px;
- font-size: 10px;
- text-align: center;
- margin-top: -25px;">鐩爣锛歿{ (mois[2] * 100).toFixed(2) }}%</div>
- <div style=" width: 110px;
- text-align: center;
- margin-top: 23px;">鍚按鐜�</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="tempChart" style="pointer-events: none; cursor: none;" :id="'tempDom' + item.id">
- <a-slider v-model:value="tempValue"
-
- :min="0" range :max="100" :marks="marks" vertical />
- <div>鐑锛�<span class="info-text">{{ tempValue[0] }}</span> 掳C</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: 10px; 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: 10px; 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
+ >鐑锛�<span class="info-text">{{ realTime.get(item.id)?.windTemp | 0 }}</span> 掳C</div
+ >
</div>
</div>
</div>
@@ -92,17 +97,22 @@
</template>
<script setup lang="ts">
- import { onMounted, ref } from 'vue'
+ 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.3939,0.2112,0.11])
+ const mois = ref([0, 0, 0])
+ const userStore = useUserStore()
+ const Timer = ref()
- const tempValue = ref(<Record<number, number>>([70, 100]))
+ const realTime = ref(new Map())
const marks = ref<Record<number, any>>({
0: '0掳C',
@@ -212,7 +222,8 @@
.then((result) => {
console.log(`output->result`, result)
eqps.value = result
- setTimeout(initCharts, 1000)
+ setTimeout(initCharts, 500)
+ updateRealTime()
})
.catch((err) => {
console.log(`output->err`, err)
@@ -221,150 +232,206 @@
// var wetCharts: Map<string, echarts.ECharts> = new Map()
- var moistureCharts: 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}%'
-// }
-// },
+ 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',
-
-// // {yAxis: 0},
-// // {yAxis: 100}
-// ]
-// }
-// },
-
-// ]
-// };
-const option = {
+ // 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,
- 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: {
-
+ // lineStyle:{
+ // color: '#000',
+ // width:1,
- formatter: function(params) {
- console.log(`output->params`,params,mois.value)
+ // },
+ // label: {
+ // formatter: '鍒濆\n'+ '{c}%'
+ // }
+ // },
+ // {symbol: 'none',
+ // xAxis:0,
+ // x:60,
+ // yAxis:11,
- 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) + '%'
- ;
+ // 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: 10,
+ //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
+ },
},
- fontSize: 10,
- 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.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),
+ ]
+ moistureCharts.get(eqp.id)?.setOption({
+ series: [
+ {
+ data: res.mois,
+ label: {
+ formatter: function () {
+ return res.trendVo.moisture + '%'
+ },
+ fontSize: 10,
+ //position: ['50%',(100- res.trendVo.moisture)+ '%'],
+ },
+ },
+ ],
+ })
+ } else {
+ res = {
+ tempValue: [0, 100],
+ percent: 0,
+ mois: [],
}
- }]
-};
+ }
- option && myChart.setOption(option)
- moistureCharts.set(item.id, myChart)
- })
- }
-
-
+ realTime.value.set(eqp.id, res)
+ })
+ }
listAllEqp()
// DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛�
- onMounted(() => {})
+ onMounted(() => {
+ Timer.value = setInterval(updateRealTime, 3000)
+ })
+
+ onUnmounted(() => {
+ clearInterval(Timer.value)
+ Timer.value = null
+ })
</script>
-<style>
+<style scoped>
.workshop {
}
.eqp-row {
@@ -376,6 +443,8 @@
width: 566px;
height: 400px;
padding: 6px 6px;
+ flex-grow: 0;
+ flex-shrink: 0;
}
.eqp-content {
@@ -384,7 +453,7 @@
background-image: url('../../../assets/images/dry/ganzaoji-x.png');
background-repeat: no-repeat;
background-size: 60% 60%;
- background-position: 10px 150px;
+ background-position: 105px 150px;
border-radius: 8px;
}
@@ -395,30 +464,31 @@
display: flex;
text-align: center;
}
- .progress {
- padding:25px 25px;
+ :deep() .progress {
+ padding: 25px 25px;
width: 360px;
display: flex;
}
- .ant-progress-bg {
+ :deep() .ant-progress-bg {
height: 25px !important;
}
.eqpStatus {
- width:170px;
- background-position: 0 -10px;
- background-image: url('../../../assets/images/dry/ganzaoji.gif');
- background-size: 100% 100%;
+ width: 170px;
+ background-position: 0 0px;
+ background-image: url('../../../assets/images/dry/refeng2.gif');
+ background-size: 180px;
+ background-repeat: no-repeat;
display: inline-flex;
flex-direction: column-reverse;
padding: 15px;
-
}
.info {
display: flex;
}
.leftInfo {
- width: 335px;
+ width: 445px;
+ display: flex;
/* background: gray; */
}
.rightInfo {
@@ -445,29 +515,29 @@
}
.eqpName {
margin-top: 68px;
- margin-left: 174px;
+ margin-left: 150px;
width: 95px;
font-weight: bold;
text-align: center;
background-color: white;
+ height: 22px;
}
.tempChart {
padding-top: 10px;
-
height: 150px;
width: 100px;
}
.herbInfo {
- width: 160px;
+ width: 160px;
}
- .ant-slider-mark-text {
+ :deep() .ant-slider-mark-text {
padding-left: 15px;
font-size: 10px;
}
- .ant-slider-mark-text::before {
+ :deep() .ant-slider-mark-text::before {
content: '';
display: block;
width: 6px;
@@ -478,30 +548,30 @@
top: 10px;
left: 0px;
}
- .ant-slider-rail {
+ :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%);
}
- .ant-slider-track {
+ :deep() .ant-slider-track {
background: rgb(175, 175, 175);
height: 20px;
width: 6px !important;
border-radius: 6px 6px 0 0;
}
- .ant-slider-track:hover {
+ :deep() .ant-slider-track:hover {
}
- .ant-slider-handle {
+ :deep() .ant-slider-handle {
display: none;
}
- .ant-slider-dot {
+ :deep() .ant-slider-dot {
display: none;
}
- .ant-slider-step {
+ :deep() .ant-slider-step {
width: 10px !important;
}
- .ant-slider-step > :first-child {
+ :deep() .ant-slider-step > :first-child {
display: block !important;
width: 22px !important;
height: 22px !important;
--
Gitblit v1.9.3