From 3efe2606474fba1905fa4edab82b713b9cfb5ef3 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期二, 01 八月 2023 08:22:03 +0800
Subject: [PATCH] 完成车间大屏
---
src/views/dry/bigScreen/BigWorkShop.vue | 360 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 356 insertions(+), 4 deletions(-)
diff --git a/src/views/dry/bigScreen/BigWorkShop.vue b/src/views/dry/bigScreen/BigWorkShop.vue
index 4370abf..902e6c9 100644
--- a/src/views/dry/bigScreen/BigWorkShop.vue
+++ b/src/views/dry/bigScreen/BigWorkShop.vue
@@ -1,14 +1,366 @@
<template>
- <dv-full-screen-container>
-
- </dv-full-screen-container>
+ <dv-full-screen-container>
+ <div class="fbg">
+ <div class="bgImage">
+ <div class="head">
+ <div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div>
+
+ <div class="title">
+ <span>鍏版郸鏅鸿兘骞茬嚗杞﹂棿</span>
+
+ <dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" />
+ </div>
+ <div style="width: 600px; height: 50px; display: flex; justify-content: end">
+ <dv-decoration-8 :reverse="true" style="width: 500px; height: 50px"
+ /></div>
+ </div>
+ <div class="body">
+ <div class="humiture">
+ <div style="display: flex; width: 120px">
+ <Icon style="color: #f7b733" icon="solar:temperature-line-duotone" :size="28" />
+
+ <div style="font-size: 20px; line-height: 26px"> 26 鈩� </div>
+ </div>
+ <div style="display: flex">
+ <Icon style="color: #f7b733" icon="material-symbols:humidity-percentage-outline" :size="28" />
+
+ <div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
+ </div>
+ </div>
+ <div class="up">
+ <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
+ <div class="eqpInfoup" @click="gotoeqp(num - 1)">
+ <div class="eqp-title">
+ <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '棰勭暀' }}</div>
+ <!-- <div class="process"> </div> -->
+ <Progress
+ :stroke-color="{
+ from: '#108ee9',
+ to: '#87d068',
+ }"
+ :percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')"
+ status="active"
+ trailColor="#2b2b2b2b"
+ :show-info="false"
+ />
+ <!-- <div class="eqp-name">50%</div> -->
+ </div>
+ <div class="eqp-info-up">
+ <div class="herb">{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
+ </div>
+ <div class="water">
+ <div class="temp">
+ <div style="line-height: 28px"><Icon style="color: #2a5a63" icon="ic:twotone-water-drop" :size="28" /> </div>
+ <div class="font">
+ <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo.moisture || '0' }}</span> %
+ </div>
+ </div>
+ <div class="temp">
+ <div style="line-height: 28px"><Icon style="color: #6c5b7b" icon="solar:temperature-bold-duotone" :size="30" /> </div>
+ <div class="font">
+ <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo.bellowsTemp || '0' }} </span> 鈩�
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="down">
+ <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
+ <div class="eqpInfodown" @click="gotoeqp(num + 3)">
+ <div class="eqp-info-down">
+ <div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div>
+ </div>
+ <div class="water">
+ <div class="temp">
+ <div style="line-height: 28px">
+ <Icon style="color: #2a5a63" icon="ic:twotone-water-drop" :size="28" />
+ </div>
+ <div class="font">
+ <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo.moisture || '0' }}</span> %
+ </div>
+ </div>
+ <div class="temp">
+ <div style="line-height: 28px"><Icon style="color: #6c5b7b" icon="solar:temperature-bold-duotone" :size="30" /> </div>
+ <div class="font">
+ <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo.bellowsTemp || '0' }}</span> 鈩�
+ </div>
+ </div>
+ </div>
+
+ <div style="height: 70px"></div>
+ <div class="eqp-title">
+ <!-- <div class="process"> </div> -->
+ <Progress
+ :stroke-color="{
+ from: '#108ee9',
+ to: '#87d068',
+ }"
+ :percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')"
+ status="active"
+ trailColor="#2b2b2b2b"
+ :show-info="false"
+ />
+ <!-- <div class="eqp-name">50%</div> -->
+ <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '棰勭暀' }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-full-screen-container>
</template>
<script setup lang="ts">
+ import { Progress } from 'ant-design-vue'
+ import { onMounted, ref, onUnmounted } from 'vue'
+ import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
+ 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 eqpNum = ref(4)
+ const eqpMap = ref(new Map())
+ const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006'])
+ const eqps = ref([] as dryEquipment[])
+ const userStore = useUserStore()
+ const Timer = ref()
+ const realTime = ref(new Map())
+
+ function listAllEqp() {
+ listAll({ enable: 'Y' })
+ .then((result) => {
+ //console.log(`output->result`, result)
+ eqps.value = result
+
+ result.forEach((item) => {
+ eqpMap.value.set(item.code, item)
+ })
+ updateRealTime()
+ })
+ .catch((err) => {
+ console.log(`output->err`, err)
+ })
+ }
+
+ 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.dryTime + res.remain)) * 100).toFixed(2)
+ } else {
+ res = {
+ tempValue: [0, 100],
+ percent: 0,
+ mois: [],
+ }
+ }
+
+ realTime.value.set(eqp.code, res)
+ })
+ }
+ function gotoeqp(num) {
+ if (num < eqpCodes.value.length) {
+ router.push({ path: '/bigEqp', query: { num: num } })
+ }
+ }
+
+ listAllEqp()
+ onMounted(() => {
+ Timer.value = setInterval(updateRealTime, 3000)
+ })
+
+ onUnmounted(() => {
+ clearInterval(Timer.value)
+ Timer.value = null
+ })
</script>
<style scoped>
+ .fbg {
+ height: 1080px;
+ width: 1920px;
+ background-image: url(/src/assets/images/dry/bg/bg5.png);
+ background-repeat: no-repeat;
+ }
+ .bgImage {
+ height: 1080px;
+ width: 1920px;
+ background-image: url(/src/assets/images/dry/bg/wksp2.png);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ background-position: 0% 50%;
+ }
-</style>
\ No newline at end of file
+ .head {
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ }
+
+ .body {
+ height: 980px;
+ width: 100%;
+ margin-top: -100px;
+ font-size: 20px;
+ }
+ .title {
+ height: 200px;
+ padding: 20px;
+ font-size: 30px;
+ font-weight: bold;
+ text-align: center;
+ color: white;
+ }
+
+ .humiture {
+ height: 0px;
+ justify-content: center;
+ color: white;
+ display: flex;
+ }
+
+ .up {
+ padding-left: 100px;
+ padding-top: 00px;
+ display: flex;
+
+ align-content: center;
+ justify-content: flex-start;
+ }
+ .down {
+ padding-left: 392px;
+ margin-top: -334px;
+ display: flex;
+
+ align-content: center;
+ justify-content: flex-start;
+ }
+ .eqpInfoup {
+ width: 280px;
+ height: 300px;
+ margin: 0 41px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .eqpInfodown {
+ width: 280px;
+ height: 300px;
+ margin: 0 41px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ }
+
+ .one {
+ margin-top: 280px;
+ }
+
+ .two {
+ margin-top: 220px;
+ }
+
+ .three {
+ margin-top: 160px;
+ }
+
+ .four {
+ margin-top: 100px;
+ }
+
+ .eqp-title {
+ height: 30px;
+ border-radius: 20px;
+ /* background: rgb(182, 182, 182);
+ border: 1px solid green; */
+ width: 100%;
+ }
+
+ .eqp-name {
+ line-height: 30px;
+ text-align: center;
+ color: white;
+ margin-top: -30px;
+ }
+
+ .eqp-name-down {
+ line-height: 40px;
+ text-align: center;
+ color: white;
+ }
+
+ .process {
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ border-radius: 20px;
+ background: #3f4c6b;
+ }
+
+ .eqp-info-up {
+ flex: 1;
+ padding-top: 120px;
+ display: flex;
+ }
+
+ .eqp-info-down {
+ flex: 1;
+ padding-top: 50px;
+ display: flex;
+ }
+
+ .herb {
+ height: 30px;
+ background: #3f4c6b;
+ color: white;
+ line-height: 30px;
+ padding: 0 10px;
+ }
+ .water {
+ height: 120px;
+ width: 110px;
+ margin-left: 170px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: space-evenly;
+ }
+
+ .temp {
+ display: flex;
+ }
+ .font {
+ line-height: 26px;
+ }
+
+ .value {
+ }
+ :deep() .progress {
+ padding: 25px 25px;
+
+ width: 360px;
+ display: flex;
+ }
+ :deep() .ant-progress-bg {
+ height: 25px !important;
+ }
+ :deep() .ant-progress-inner {
+ background-color: rgb(197 197 197 / 52%) !important;
+ }
+</style>
--
Gitblit v1.9.3