From ee34eecc99626bfdd47a605861722a110b82d14d Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期四, 09 十一月 2023 15:00:34 +0800
Subject: [PATCH] 机台大屏优化，车间大屏换背景
---
src/assets/images/dry/bg/wkspbg2.png | 0
src/assets/images/dry/bg/wkshopp.png | 0
src/assets/images/dry/bg/wkspbg.png | 0
src/views/dry/bigScreen/BigWorkShop1.vue | 668 +++++++++++++++++++++++++++
src/views/dry/bigScreen/BigEqp.vue | 9
src/assets/images/dry/bg/wkspbg3.png | 0
src/views/dry/bigScreen/BigWorkShop2.vue | 753 +++++++++++++++++++++++++++++++
src/assets/images/dry/bg/wkspbg1.png | 0
src/router/routes/index.ts | 10
9 files changed, 1,435 insertions(+), 5 deletions(-)
diff --git a/src/assets/images/dry/bg/wkshopp.png b/src/assets/images/dry/bg/wkshopp.png
new file mode 100644
index 0000000..9aeeb45
--- /dev/null
+++ b/src/assets/images/dry/bg/wkshopp.png
Binary files differ
diff --git a/src/assets/images/dry/bg/wkspbg.png b/src/assets/images/dry/bg/wkspbg.png
new file mode 100644
index 0000000..c0109e6
--- /dev/null
+++ b/src/assets/images/dry/bg/wkspbg.png
Binary files differ
diff --git a/src/assets/images/dry/bg/wkspbg1.png b/src/assets/images/dry/bg/wkspbg1.png
new file mode 100644
index 0000000..a38cee9
--- /dev/null
+++ b/src/assets/images/dry/bg/wkspbg1.png
Binary files differ
diff --git a/src/assets/images/dry/bg/wkspbg2.png b/src/assets/images/dry/bg/wkspbg2.png
new file mode 100644
index 0000000..01ca8a6
--- /dev/null
+++ b/src/assets/images/dry/bg/wkspbg2.png
Binary files differ
diff --git a/src/assets/images/dry/bg/wkspbg3.png b/src/assets/images/dry/bg/wkspbg3.png
new file mode 100644
index 0000000..d47f748
--- /dev/null
+++ b/src/assets/images/dry/bg/wkspbg3.png
Binary files differ
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index a040930..d77d782 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -47,6 +47,14 @@
title: t('big.screen.workshop'),
},
}
+export const BigScreenN: AppRouteRecordRaw = {
+ path: '/bigScreenN',
+ name: 'BigScreenN',
+ component: () => import('/@/views/dry/bigScreen/BigWorkShop2.vue'),
+ meta: {
+ title: t('big.screen.workshopn'),
+ },
+}
export const BigEqp: AppRouteRecordRaw = {
path: '/bigEqp',
name: 'BigEqp',
@@ -82,4 +90,4 @@
}
// Basic routing without permission
-export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigEqp]
+export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigScreenN,BigEqp]
diff --git a/src/views/dry/bigScreen/BigEqp.vue b/src/views/dry/bigScreen/BigEqp.vue
index db3904b..6c53024 100644
--- a/src/views/dry/bigScreen/BigEqp.vue
+++ b/src/views/dry/bigScreen/BigEqp.vue
@@ -122,10 +122,11 @@
margin-left: 100px;
font-size: 22px;
background: sandybrown;
- height: 60px;
+
border-radius: 10px;
- line-height: 0;
- padding: 29px;
+ line-height: 25px;
+ max-width: 500px;
+ padding: 15px;
font-weight: bold;" >
{{ realData?.warnMsg }}
</div>
@@ -1912,7 +1913,7 @@
.eqpStatus {
width: 848px;
- height: 300px;
+
}
.rightInfo {
display: flex;
diff --git a/src/views/dry/bigScreen/BigWorkShop1.vue b/src/views/dry/bigScreen/BigWorkShop1.vue
new file mode 100644
index 0000000..1f6589e
--- /dev/null
+++ b/src/views/dry/bigScreen/BigWorkShop1.vue
@@ -0,0 +1,668 @@
+<template>
+ <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>{{ title }}</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: #ba9853" icon="mdi:home-temperature-outline" :size="28" />
+
+ <div style="font-size: 20px; line-height: 26px"> 26 鈩� </div>
+ </div>
+ <div style="display: flex">
+ <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
+
+ <div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
+ </div>
+ </div>
+ <div class="feed">
+ <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between;">
+
+ <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 鎬绘姇鏂欓噺
+ </div>
+ <div class="stat_value">
+ 5066
+ <span class="font16">
+ Kg
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 棰勮浜ч噺
+ </div>
+ <div>
+ 2321kg
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 鐢甸噺娑堣��
+ </div>
+ <div class="stat_value">
+ 462
+ <span class="font16">
+ Kwh
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 骞冲潎鐢佃��
+ </div>
+ <div>
+ 13 Kwh/kg
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 钂告苯娑堣��
+ </div>
+ <div class="stat_value">
+ 683
+ <span class="font16">
+ m鲁
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 骞冲潎姹借��
+ </div>
+ <div>
+ 23 m鲁
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <!-- <div class="statistics putincolor">
+ <div class="stat_label font16">棰勮浜ч噺</div>
+ <div class="stat_value">3000</div>
+
+ <div class="font16">
+ <br/>
+ Kg
+ </div>
+ </div> -->
+ </div>
+
+ <div>
+ <!-- <div class="statistics electroncolor">
+ <div class="stat_label font16">鐢甸噺娑堣��</div>
+ <div class="stat_value">500</div>
+ <div class="font16">
+ <br/>
+ Kwh
+ </div>
+
+ </div>
+ <div class="statistics steamcolor">
+ <div class="stat_label font16">钂告苯娑堣��</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ m鲁
+ </div>
+
+ </div>
+
+ <div class="statistics electroncolor">
+ <div class="stat_label font16">骞冲潎鐢佃��</div>
+ <div class="stat_value">12</div>
+ <div class="font16">
+ <br/>
+ Kwh/kg
+ </div>
+
+ </div>
+ <div class="statistics steamcolor">
+ <div class="stat_label font16">骞冲潎姹借��</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ m鲁/kg
+ </div>
+
+ </div> -->
+ </div>
+
+
+ </div>
+ <!-- <div style="padding-right: 100px;">
+ <div class="statistics">
+ <div class="stat_label font16">骞叉枡浜ч噺</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ kg
+ </div>
+
+ </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="herb_weight">
+ <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
+ <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div>
+ </div>
+ <!-- <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-timer">
+ <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
+ {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture.toFixed(1) || '0' }} %
+ </div>
+ <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
+ {{realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} 鈩�
+ </div>
+ <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
+ {{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min
+ </div>
+ </div>
+ </div>
+ <div class="eqp-info-up">
+ <!-- <div class="herb">
+ <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
+
+ </div> -->
+
+ </div>
+ <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> -->
+
+ <div class="weight"><div class="herb">
+ {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
+ </div></div>
+ <div class="water">
+ <div class="eqp_num">{{ num }}</div>
+ <!-- <div class="temp">
+ <div style="line-height: 28px"><Icon style="color: #1850b7" 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: #873853" icon="fluent:temperature-20-regular" :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="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> -->
+ <div class="weight"><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div>
+ <div class="water">
+ <div class="eqp_num">{{ num + 4 }}</div>
+ <!-- <div class="temp">
+ <div style="line-height: 28px">
+ <Icon style="color: #1850b7" 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: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
+ <div class="font">
+ <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> 鈩�
+ </div>
+ </div> -->
+ </div>
+
+ <div style="height: 40px"></div>
+ <div class="eqp-title">
+ <div class="herb_weight">
+ <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div>
+ <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
+ </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-timer">
+ <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
+ {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture.toFixed(1) || '0' }} %
+ </div>
+ <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
+ {{realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} 鈩�
+ </div>
+ <!-- <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
+ {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min
+ </div> -->
+ <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
+ {{ realTime.get(eqpCodes[num + 3])?.totalRemain||0}} min
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="footer">
+
+ <div >{{ nowDate }}</div>
+ <div >{{ nowTime }}</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', 'GM007', 'GM008'])
+ const eqps = ref([] as dryEquipment[])
+ const title = ref("鍏版郸鏅鸿兘骞茬嚗杞﹂棿")
+ const userStore = useUserStore()
+ console.log(userStore.dictItems.title)
+ userStore.dictItems.title?.forEach(element => {
+ if (element.value === "bigscreentitle") {
+ title.value = element.text
+ }
+
+ });
+ const Timer = ref()
+
+ const realTime = ref(new Map())
+ const nowTime = ref()
+ const nowDate = ref()
+
+
+ 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.totalRemain = res.remain
+ if (res.detailList) {
+ // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級
+ res.totalRemain = res.remain-(res.dryTime-res.detailList[res.detailList.length - 1].totalTime)
+ }
+ if(res.totalRemain < 0) {
+ res.totalRemain = 0
+ }
+
+ res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
+ } else {
+ res = {
+ tempValue: [0, 100],
+ percent: 0,
+ mois: [],
+ }
+ }
+
+ realTime.value.set(eqp.code, res)
+ })
+ }
+ function gotoeqp(num) {
+ console.log('璺宠浆鏈哄彴',num);
+ if (num < eqpCodes.value.length) {
+ router.push({ path: '/bigEqp', query: { num: num } })
+ }
+ }
+
+ function getNowTime() {
+ var date = new Date()
+ nowDate.value = (date.getFullYear()) + "/" + (date.getMonth()< 9? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "/" + (date.getDay() < 10? "0" + date.getDay() : date.getDay())
+ nowTime.value = "" + (date.getHours()<10? "0" + date.getHours() : date.getHours()) + ":" + (date.getMinutes()< 10? "0" + date.getMinutes(): date.getMinutes())
+ //console.log("鑾峰彇褰撳墠鏃堕棿锛�");
+ }
+
+ function showInfo(data) {
+ return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'绌洪棽':'绌洪棽'
+ }
+
+ getNowTime()
+ listAllEqp()
+ onMounted(() => {
+ Timer.value = setInterval(updateRealTime, 3000)
+ setInterval(getNowTime,10000)
+ })
+
+ onUnmounted(() => {
+ clearInterval(Timer.value)
+ Timer.value = null
+ })
+</script>
+
+<style scoped>
+ .fbg {
+ height: 1080px;
+ width: 1920px;
+ background-image: url(/src/assets/images/dry/bg/wkshopp.png);
+ background-repeat: no-repeat;
+ }
+ .bgImage {
+ height: 1080px;
+ width: 1920px;
+
+ }
+
+ .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;
+ }
+
+ .feed {
+ display: flex;
+ height: 0px;
+ color: gray;
+ padding-top: 20px;
+ justify-content: space-between;
+ }
+
+ .up {
+ padding-left: 0px;
+ padding-top: 00px;
+ display: flex;
+
+ align-content: center;
+ justify-content: flex-start;
+ }
+ .down {
+ padding-left: 402px;
+ margin-top: -246px;
+ display: flex;
+
+ align-content: center;
+ justify-content: flex-start;
+ }
+ .eqpInfoup {
+ width: 300px;
+ height: 400px;
+ margin: -50px 31px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .eqpInfodown {
+ width: 300px;
+ height: 430px;
+ margin: 0 31px;
+ padding-top: 132px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ }
+
+ .one {
+ margin-top: 227px;
+ }
+
+ .two {
+ margin-top: 183px;
+ }
+
+ .three {
+ margin-top: 132px;
+ }
+
+ .four {
+ margin-top: 69px;
+ }
+
+ .eqp-title {
+ height: 125px;
+
+ width: 100%;
+
+ padding: 10px 20px;
+ }
+
+ .eqp-name {
+ line-height: 30px;
+ text-align: center;
+ color: white;
+ margin-top: -30px;
+ }
+
+ .eqp-timer {
+ line-height: 30px;
+ text-align: center;
+ color: white;
+ margin-top: 6px;
+ justify-content: space-between;
+ display: flex;
+ }
+
+ .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: 108px;
+ display: flex;
+ }
+
+ .weight {
+ flex: 1;
+ display: flex;
+ font-size: 20px;
+ }
+
+ .eqp-info-down {
+ flex: 1;
+ padding-top: 70px;
+ display: flex;
+ }
+
+ .herb {
+ height: 32px;
+ background: #3f4c6b;
+ color: white;
+ line-height: 30px;
+ padding: 0 10px;
+ }
+ .water {
+ height: 120px;
+ width: 110px;
+ margin-left: 200px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .temp {
+ display: flex;
+ }
+ .font {
+ line-height: 26px;
+ }
+
+
+ .footer {
+ height: 160px;
+ display: flex;
+ padding: 10px 20px;
+ font-size: 30px;
+ flex-direction: column-reverse;
+ align-items: flex-end;
+ color: white;
+ line-height: 40px;
+ margin-top: -150px;
+
+ }
+ :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 / 84%) !important;
+ }
+
+ .statistics {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ }
+ .stat_label {
+ width:45px
+ }
+
+ .stat_value {
+ font-size: 32px
+ }
+
+ .herb_weight {
+ padding: 0 10px;
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ }
+ .eqp_num {
+ font-weight: bold;
+ width: 40px;
+ height: 40px;
+ background: #a0782e;
+ border-radius: 50px;
+ /* text-align: center; */
+ font-size: 23px;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .putincolor {
+ color: antiquewhite;
+ }
+
+ .electroncolor {
+ color: aquamarine;
+ }
+
+ .steamcolor {
+ color: sandybrown
+ }
+ .font16 {
+ font-size: 16px;
+ }
+ .stat_avg {
+ width: 100%; font-size: 16px; display: flex; color: rgb(176, 176, 176); justify-content: space-between; border-top: 1px solid;
+ margin-top: 6px;
+ }
+</style>
diff --git a/src/views/dry/bigScreen/BigWorkShop2.vue b/src/views/dry/bigScreen/BigWorkShop2.vue
new file mode 100644
index 0000000..b002af8
--- /dev/null
+++ b/src/views/dry/bigScreen/BigWorkShop2.vue
@@ -0,0 +1,753 @@
+<template>
+ <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>{{ title }}</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: #ba9853" icon="mdi:home-temperature-outline" :size="28" />
+
+ <div style="font-size: 20px; line-height: 26px"> 26 鈩� </div>
+ </div>
+ <div style="display: flex">
+ <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
+
+ <div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
+ </div>
+ </div>
+ <div class="feed">
+ <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between;">
+
+ <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 鎬绘姇鏂欓噺
+ </div>
+ <div class="stat_value">
+ 5066
+ <span class="font16">
+ Kg
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 棰勮浜ч噺
+ </div>
+ <div>
+ 2321kg
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 鐢甸噺娑堣��
+ </div>
+ <div class="stat_value">
+ 462
+ <span class="font16">
+ Kwh
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 骞冲潎鐢佃��
+ </div>
+ <div>
+ 13 Kwh/kg
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
+ <div class="statistics putincolor">
+ <div class="stat_label font16">
+ 钂告苯娑堣��
+ </div>
+ <div class="stat_value">
+ 683
+ <span class="font16">
+ m鲁
+ </span>
+ </div>
+ <div class="stat_avg">
+ <div>
+ 骞冲潎姹借��
+ </div>
+ <div>
+ 23 m鲁
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <!-- <div class="statistics putincolor">
+ <div class="stat_label font16">棰勮浜ч噺</div>
+ <div class="stat_value">3000</div>
+
+ <div class="font16">
+ <br/>
+ Kg
+ </div>
+ </div> -->
+ </div>
+
+ <div>
+ <!-- <div class="statistics electroncolor">
+ <div class="stat_label font16">鐢甸噺娑堣��</div>
+ <div class="stat_value">500</div>
+ <div class="font16">
+ <br/>
+ Kwh
+ </div>
+
+ </div>
+ <div class="statistics steamcolor">
+ <div class="stat_label font16">钂告苯娑堣��</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ m鲁
+ </div>
+
+ </div>
+
+ <div class="statistics electroncolor">
+ <div class="stat_label font16">骞冲潎鐢佃��</div>
+ <div class="stat_value">12</div>
+ <div class="font16">
+ <br/>
+ Kwh/kg
+ </div>
+
+ </div>
+ <div class="statistics steamcolor">
+ <div class="stat_label font16">骞冲潎姹借��</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ m鲁/kg
+ </div>
+
+ </div> -->
+ </div>
+
+
+ </div>
+ <!-- <div style="padding-right: 100px;">
+ <div class="statistics">
+ <div class="stat_label font16">骞叉枡浜ч噺</div>
+ <div class="stat_value">300</div>
+ <div class="font16">
+ <br/>
+ kg
+ </div>
+
+ </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="herb_weight">
+ <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
+ <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div>
+ </div>
+ <!-- <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-timer">
+ <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
+ {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture.toFixed(1) || '0' }} %
+ </div>
+ <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
+ {{realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} 鈩�
+ </div>
+ <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
+ {{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min
+ </div>
+ </div>
+ </div>
+ <div class="eqp-info-up">
+ <!-- <div class="herb">
+ <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div>
+
+ </div> -->
+
+ </div>
+ <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> -->
+
+ <div class="weight"><div class="herb">
+ {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
+ </div></div>
+ <div class="water">
+ <div class="eqp_num">{{ num }}</div>
+ <!-- <div class="temp">
+ <div style="line-height: 28px"><Icon style="color: #1850b7" 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: #873853" icon="fluent:temperature-20-regular" :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="{ done: num === 1, dtwo: num === 2, dthree: num === 3, dfour: 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="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> -->
+ <div class="weight"><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div>
+ <div class="water">
+ <div class="eqp_num">{{ num + 4 }}</div>
+ <!-- <div class="temp">
+ <div style="line-height: 28px">
+ <Icon style="color: #1850b7" 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: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
+ <div class="font">
+ <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> 鈩�
+ </div>
+ </div> -->
+ </div>
+
+ <div class="dblank"></div>
+ <div class="eqp-title">
+ <div class="herb_weight">
+ <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div>
+ <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
+ </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-timer">
+ <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
+ {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture.toFixed(1) || '0' }} %
+ </div>
+ <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
+ {{realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} 鈩�
+ </div>
+ <!-- <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
+ {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min
+ </div> -->
+ <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
+ {{ realTime.get(eqpCodes[num + 3])?.totalRemain||0}} min
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="footer">
+
+ <div >{{ nowDate }}</div>
+ <div >{{ nowTime }}</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', 'GM007', 'GM008'])
+ const eqps = ref([] as dryEquipment[])
+ const title = ref("鍏版郸鏅鸿兘骞茬嚗杞﹂棿")
+ const userStore = useUserStore()
+ console.log(userStore.dictItems.title)
+ userStore.dictItems.title?.forEach(element => {
+ if (element.value === "bigscreentitle") {
+ title.value = element.text
+ }
+
+ });
+ const Timer = ref()
+
+ const realTime = ref(new Map())
+ const nowTime = ref()
+ const nowDate = ref()
+
+
+ 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.totalRemain = res.remain
+ if (res.detailList) {
+ // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級
+ res.totalRemain = res.remain-(res.dryTime-res.detailList[res.detailList.length - 1].totalTime)
+ }
+ if(res.totalRemain < 0) {
+ res.totalRemain = 0
+ }
+
+ res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
+ } else {
+ res = {
+ tempValue: [0, 100],
+ percent: 0,
+ mois: [],
+ }
+ }
+
+ realTime.value.set(eqp.code, res)
+ })
+ }
+ function gotoeqp(num) {
+ console.log('璺宠浆鏈哄彴',num);
+ if (num < eqpCodes.value.length) {
+ router.push({ path: '/bigEqp', query: { num: num } })
+ }
+ }
+
+ function getNowTime() {
+ var date = new Date()
+ nowDate.value = (date.getFullYear()) + "/" + (date.getMonth()< 9? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "/" + (date.getDay() < 10? "0" + date.getDay() : date.getDay())
+ nowTime.value = "" + (date.getHours()<10? "0" + date.getHours() : date.getHours()) + ":" + (date.getMinutes()< 10? "0" + date.getMinutes(): date.getMinutes())
+ //console.log("鑾峰彇褰撳墠鏃堕棿锛�");
+ }
+
+ function showInfo(data) {
+ return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'绌洪棽':'绌洪棽'
+ }
+
+ getNowTime()
+ listAllEqp()
+ onMounted(() => {
+ Timer.value = setInterval(updateRealTime, 3000)
+ setInterval(getNowTime,10000)
+ })
+
+ 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/wkspbg3.png);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ background-position: 0px 50px;
+ }
+
+ .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;
+ }
+
+ .feed {
+ display: flex;
+ height: 0px;
+ color: gray;
+ padding-top: 20px;
+ justify-content: space-between;
+ }
+
+ .up {
+ padding-left: 55px;
+ padding-top: 48px;
+ display: flex;
+
+ align-content: center;
+ justify-content: flex-start;
+ }
+ .down {
+ padding-left: 340px;
+ margin-top: -246px;
+ display: flex;
+
+ align-content: center;
+ justify-content: flex-start;
+ }
+ .eqpInfoup {
+ width: 300px;
+ height: 400px;
+ margin: -50px 10px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .eqpInfodown {
+ width: 300px;
+ height: 380px;
+ margin: 0 50px;
+ padding-top: 0px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ }
+
+ .one {
+ margin-top: 227px;
+ }
+
+ .two {
+ margin-top: 193px;
+ }
+
+ .three {
+ margin-top: 160px;
+ }
+
+ .four {
+ margin-top: 127px;
+ }
+
+ .done {
+ margin-top: 240px;
+ }
+
+ .dtwo {
+ margin-left: -20px;
+ margin-top: 184px;
+ }
+
+ .dthree {
+ margin-left: 58px;
+ margin-top: 107px;
+ }
+
+ .dfour {
+ margin-left: -71px;
+ margin-top: 70px;
+ }
+
+ .eqp-title {
+ height: 125px;
+
+ width: 100%;
+
+ padding: 10px 20px;
+ }
+
+ .eqp-name {
+ line-height: 30px;
+ text-align: center;
+ color: white;
+ margin-top: -30px;
+ }
+
+ .eqp-timer {
+ line-height: 30px;
+ text-align: center;
+ color: white;
+ margin-top: 6px;
+ justify-content: space-between;
+ display: flex;
+ }
+
+ .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 {
+
+ padding-top: 20px;
+ display: flex;
+ }
+
+ .weight {
+
+ display: flex;
+ font-size: 20px;
+ }
+
+ .eqp-info-down {
+ flex: 1;
+ padding-top: 70px;
+ display: flex;
+ }
+
+ .herb {
+ height: 32px;
+ background: #3f4c6b;
+ color: white;
+ line-height: 30px;
+ padding: 0 10px;
+ }
+ .water {
+
+ height: 120px;
+ width: 110px;
+
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .one .eqpInfoup .water {
+ padding-top: 37px;
+ margin-left: 201px;
+ }
+ .two .eqpInfoup .water {
+ padding-top: 32px;
+ margin-left: 184px;
+ }
+ .three .eqpInfoup .water {
+ padding-top: 11px;
+ margin-left: 284px;
+ }
+ .three .eqpInfoup .weight {
+
+ margin-left: 69px;
+ }
+ .four .eqpInfoup .water {
+ padding-top: 14px;
+ margin-left: 186px;
+ }
+ .done .eqpInfodown .water {
+ padding-top: 89px;
+ margin-left: 205px;
+ }
+ .dtwo .eqpInfodown .water {
+ padding-top: 72px;
+ margin-left: 213px;
+ }
+ .dthree .eqpInfodown .water {
+ padding-top: 48px;
+ margin-left: 263px;
+ }
+
+ .dfour .eqpInfodown .water {
+ padding-top: 38px;
+ margin-left: 189px;
+ }
+ .done .eqpInfodown .dblank {
+ height: 93px;
+ }
+ .dtwo .eqpInfodown .dblank {
+ height: 103px;
+ }
+ .dthree .eqpInfodown .dblank {
+ height: 83px;
+ }
+
+ .dfour .eqpInfodown .dblank {
+ height: 48px;
+ }
+ .done .eqpInfodown .weight {
+ margin-left: -77px;
+ }
+ .dtwo .eqpInfodown .weight {
+ margin-left: -77px;
+ }
+ .dthree .eqpInfodown .weight {
+ margin-left: -50px;
+ }
+
+ .dfour .eqpInfodown .weight {
+ margin-left: -50px;
+ }
+ .temp {
+ display: flex;
+ }
+ .font {
+ line-height: 26px;
+ }
+
+
+ .footer {
+ height: 160px;
+ display: flex;
+ padding: 10px 20px;
+ font-size: 30px;
+ flex-direction: column-reverse;
+ align-items: flex-end;
+ color: white;
+ line-height: 40px;
+ margin-top: -150px;
+
+ }
+ :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 / 84%) !important;
+ }
+
+ .statistics {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ }
+ .stat_label {
+ width:45px
+ }
+
+ .stat_value {
+ font-size: 32px
+ }
+
+ .herb_weight {
+ padding: 0 10px;
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ }
+ .eqp_num {
+ font-weight: bold;
+ width: 40px;
+ height: 40px;
+ background: #a0782e;
+ border-radius: 50px;
+ /* text-align: center; */
+ font-size: 23px;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .putincolor {
+ color: antiquewhite;
+ }
+
+ .electroncolor {
+ color: aquamarine;
+ }
+
+ .steamcolor {
+ color: sandybrown
+ }
+ .font16 {
+ font-size: 16px;
+ }
+ .stat_avg {
+ width: 100%; font-size: 16px; display: flex; color: rgb(176, 176, 176); justify-content: space-between; border-top: 1px solid;
+ margin-top: 6px;
+ }
+</style>
--
Gitblit v1.9.3