From d9d32b6627e75d945e2ab8709aa1a12a95305d82 Mon Sep 17 00:00:00 2001
From: bsw215583320 <baoshiwei121@163.com>
Date: 星期一, 26 六月 2023 13:11:23 +0800
Subject: [PATCH] 设备监控完善
---
src/assets/images/dry/bg/3.jpg | 0
src/assets/images/dry/yaocai1.png | 0
src/assets/images/dry/bg/4.jpg | 0
src/views/sys/login/LoginSelect.vue | 2
src/assets/images/dry/yaocai/mohanlian.png | 0
src/assets/images/dry/fanliao-N.gif | 0
src/assets/images/dry/yaocai/baihuasheshecao.png | 0
src/views/dry/monitor/WorkShop.vue | 61
src/assets/images/dry/fengxiangsheng-1.gif | 0
src/assets/images/dry/yaocai/mohanlian1.png | 0
src/assets/images/dry/guanmen1.gif | 0
src/assets/images/dry/bg/2.jpg | 0
src/assets/images/dry/yaocai/sangbaipi1.png | 0
src/assets/images/dry/zhuangwangban-1.gif | 0
src/views/dry/bigScreen/BigEqp.vue | 2216 ++++++++++++++++++
src/assets/images/dry/chaiwangban-1.gif | 0
src/views/dry/monitor/Eqp.vue | 791 ++++-
src/router/routes/index.ts | 18
src/assets/images/dry/bg/1.jpg | 0
src/assets/images/dry/2.png | 0
src/assets/images/dry/chaiwangban-N.gif | 0
src/assets/images/dry/kaimen-n.gif | 0
src/assets/images/dry/bg/bg5.png | 0
.env.development | 4
src/views/dry/bigScreen/BigWorkShop.vue | 14
src/assets/images/dry/zanting.png | 0
src/assets/images/dry/kaimen1.gif | 0
src/views/dry/dataDefine/DryHerb.data.ts | 170
src/assets/images/dry/yaocai/machixian.png | 0
src/assets/images/dry/tmchaiwangban.gif | 0
src/assets/images/dry/yaocai/yinyanghuo1.png | 0
src/views/dry/bigScreen/BigEqp copy.vue | 1921 ++++++++++++++++
src/assets/images/dry/bg.png | 0
src/assets/images/dry/shangliao-1.gif | 0
src/views/dry/monitor/Eqp2.vue | 1788 +++++++++++++++
src/assets/images/dry/bg/7.jpg | 0
src/assets/images/dry/shangliao-N.gif | 0
src/views/system/loginmini/MiniLogin.vue | 26
src/assets/images/dry/chuliao-N.gif | 0
src/assets/images/dry/tmfengxiangsheng.gif | 0
src/assets/images/dry/bg/6.jpg | 0
src/assets/images/dry/yaocai/yaocai1.png | 0
src/assets/images/dry/tmfanliao.gif | 0
src/assets/images/dry/yaocai/sangbaipi.png | 0
src/assets/images/dry/zhuangwangban-N.gif | 0
src/main.ts | 4
src/assets/images/dry/zhuangwangban.gif | 0
src/assets/images/dry/bg/5.jpg | 0
src/assets/images/dry/tmrefeng2.gif | 0
src/assets/images/dry/tmchuliao1.gif | 0
package.json | 6
src/assets/images/dry/yaocai/yinyanghuo.png | 0
src/views/dry/monitor/Eqp1.vue | 0
53 files changed, 6,653 insertions(+), 368 deletions(-)
diff --git a/.env.development b/.env.development
index 4ec9fa7..8999449 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@
VITE_PUBLIC_PATH = /
# 璺ㄥ煙浠ｇ悊锛屾偍鍙互閰嶇疆澶氫釜 ,璇锋敞鎰忥紝娌℃湁鎹㈣绗�
-VITE_PROXY = [["/herb","http://192.168.19.168:9999"],["/upload","http://localhost:3300/upload"]]
+VITE_PROXY = [["/herb","http://jeecg-boot-gateway:9999"],["/upload","http://localhost:3300/upload"]]
# 鎺у埗鍙颁笉杈撳嚭
VITE_DROP_CONSOLE = false
@@ -14,7 +14,7 @@
VITE_GLOB_API_URL=/herb
#鍚庡彴鎺ュ彛鍏ㄨ矾寰勫湴鍧�(蹇呭～)
-VITE_GLOB_DOMAIN_URL=http://192.168.19.168:9999
+VITE_GLOB_DOMAIN_URL=http://jeecg-boot-gateway:9999
# 鎺ュ彛鍓嶇紑
VITE_GLOB_API_URL_PREFIX=
diff --git a/package.json b/package.json
index 1d4f973..c750b71 100644
--- a/package.json
+++ b/package.json
@@ -36,8 +36,10 @@
"dependencies": {
"@ant-design/colors": "^6.0.0",
"@ant-design/icons-vue": "^6.1.0",
+ "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
"@iconify/iconify": "^2.2.1",
"@jeecg/online": "3.4.4-RC",
+ "@kjgl77/datav-vue3": "^1.5.0",
"@logicflow/core": "^1.1.13",
"@logicflow/extension": "^1.1.13",
"@vue/runtime-core": "^3.2.33",
@@ -97,6 +99,7 @@
"@commitlint/config-conventional": "^16.2.1",
"@iconify/json": "^2.1.30",
"@purge-icons/generated": "^0.8.1",
+ "@rys-fe/vite-plugin-theme": "^0.8.6",
"@types/codemirror": "^5.60.5",
"@types/crypto-js": "^4.1.1",
"@types/fs-extra": "^9.0.13",
@@ -107,9 +110,9 @@
"@types/mockjs": "^1.0.6",
"@types/node": "^17.0.25",
"@types/nprogress": "^0.2.0",
+ "@types/pinyin": "^2.10.0",
"@types/qrcode": "^1.4.2",
"@types/qs": "^6.9.7",
- "@types/pinyin": "^2.10.0",
"@types/showdown": "^1.9.4",
"@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^5.20.0",
@@ -172,7 +175,6 @@
"vite-plugin-pwa": "^0.12.3",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
- "@rys-fe/vite-plugin-theme": "^0.8.6",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vite-plugin-windicss": "^1.8.7",
"vue-eslint-parser": "^8.3.0",
diff --git a/src/assets/images/dry/2.png b/src/assets/images/dry/2.png
new file mode 100644
index 0000000..09af2d6
--- /dev/null
+++ b/src/assets/images/dry/2.png
Binary files differ
diff --git a/src/assets/images/dry/bg.png b/src/assets/images/dry/bg.png
new file mode 100644
index 0000000..54aa045
--- /dev/null
+++ b/src/assets/images/dry/bg.png
Binary files differ
diff --git a/src/assets/images/dry/bg/1.jpg b/src/assets/images/dry/bg/1.jpg
new file mode 100644
index 0000000..890108f
--- /dev/null
+++ b/src/assets/images/dry/bg/1.jpg
Binary files differ
diff --git a/src/assets/images/dry/bg/2.jpg b/src/assets/images/dry/bg/2.jpg
new file mode 100644
index 0000000..631e710
--- /dev/null
+++ b/src/assets/images/dry/bg/2.jpg
Binary files differ
diff --git a/src/assets/images/dry/bg/3.jpg b/src/assets/images/dry/bg/3.jpg
new file mode 100644
index 0000000..43cfaf2
--- /dev/null
+++ b/src/assets/images/dry/bg/3.jpg
Binary files differ
diff --git a/src/assets/images/dry/bg/4.jpg b/src/assets/images/dry/bg/4.jpg
new file mode 100644
index 0000000..d556526
--- /dev/null
+++ b/src/assets/images/dry/bg/4.jpg
Binary files differ
diff --git a/src/assets/images/dry/bg/5.jpg b/src/assets/images/dry/bg/5.jpg
new file mode 100644
index 0000000..5f28364
--- /dev/null
+++ b/src/assets/images/dry/bg/5.jpg
Binary files differ
diff --git a/src/assets/images/dry/bg/6.jpg b/src/assets/images/dry/bg/6.jpg
new file mode 100644
index 0000000..ffa8280
--- /dev/null
+++ b/src/assets/images/dry/bg/6.jpg
Binary files differ
diff --git a/src/assets/images/dry/bg/7.jpg b/src/assets/images/dry/bg/7.jpg
new file mode 100644
index 0000000..872eedf
--- /dev/null
+++ b/src/assets/images/dry/bg/7.jpg
Binary files differ
diff --git a/src/assets/images/dry/bg/bg5.png b/src/assets/images/dry/bg/bg5.png
new file mode 100644
index 0000000..53d0186
--- /dev/null
+++ b/src/assets/images/dry/bg/bg5.png
Binary files differ
diff --git a/src/assets/images/dry/chaiwangban-1.gif b/src/assets/images/dry/chaiwangban-1.gif
new file mode 100644
index 0000000..c9a3377
--- /dev/null
+++ b/src/assets/images/dry/chaiwangban-1.gif
Binary files differ
diff --git a/src/assets/images/dry/chaiwangban-N.gif b/src/assets/images/dry/chaiwangban-N.gif
new file mode 100644
index 0000000..4ac03ae
--- /dev/null
+++ b/src/assets/images/dry/chaiwangban-N.gif
Binary files differ
diff --git a/src/assets/images/dry/chuliao-N.gif b/src/assets/images/dry/chuliao-N.gif
new file mode 100644
index 0000000..5266397
--- /dev/null
+++ b/src/assets/images/dry/chuliao-N.gif
Binary files differ
diff --git a/src/assets/images/dry/fanliao-N.gif b/src/assets/images/dry/fanliao-N.gif
new file mode 100644
index 0000000..b12eea8
--- /dev/null
+++ b/src/assets/images/dry/fanliao-N.gif
Binary files differ
diff --git a/src/assets/images/dry/fengxiangsheng-1.gif b/src/assets/images/dry/fengxiangsheng-1.gif
new file mode 100644
index 0000000..e04c675
--- /dev/null
+++ b/src/assets/images/dry/fengxiangsheng-1.gif
Binary files differ
diff --git a/src/assets/images/dry/guanmen1.gif b/src/assets/images/dry/guanmen1.gif
new file mode 100644
index 0000000..e6214b4
--- /dev/null
+++ b/src/assets/images/dry/guanmen1.gif
Binary files differ
diff --git a/src/assets/images/dry/kaimen-n.gif b/src/assets/images/dry/kaimen-n.gif
new file mode 100644
index 0000000..52ef015
--- /dev/null
+++ b/src/assets/images/dry/kaimen-n.gif
Binary files differ
diff --git a/src/assets/images/dry/kaimen1.gif b/src/assets/images/dry/kaimen1.gif
new file mode 100644
index 0000000..2dfcfbc
--- /dev/null
+++ b/src/assets/images/dry/kaimen1.gif
Binary files differ
diff --git a/src/assets/images/dry/shangliao-1.gif b/src/assets/images/dry/shangliao-1.gif
new file mode 100644
index 0000000..105f046
--- /dev/null
+++ b/src/assets/images/dry/shangliao-1.gif
Binary files differ
diff --git a/src/assets/images/dry/shangliao-N.gif b/src/assets/images/dry/shangliao-N.gif
new file mode 100644
index 0000000..45005f8
--- /dev/null
+++ b/src/assets/images/dry/shangliao-N.gif
Binary files differ
diff --git a/src/assets/images/dry/tmchaiwangban.gif b/src/assets/images/dry/tmchaiwangban.gif
new file mode 100644
index 0000000..4ac03ae
--- /dev/null
+++ b/src/assets/images/dry/tmchaiwangban.gif
Binary files differ
diff --git a/src/assets/images/dry/tmchuliao1.gif b/src/assets/images/dry/tmchuliao1.gif
new file mode 100644
index 0000000..e904d8f
--- /dev/null
+++ b/src/assets/images/dry/tmchuliao1.gif
Binary files differ
diff --git a/src/assets/images/dry/tmfanliao.gif b/src/assets/images/dry/tmfanliao.gif
new file mode 100644
index 0000000..b12eea8
--- /dev/null
+++ b/src/assets/images/dry/tmfanliao.gif
Binary files differ
diff --git a/src/assets/images/dry/tmfengxiangsheng.gif b/src/assets/images/dry/tmfengxiangsheng.gif
new file mode 100644
index 0000000..e04c675
--- /dev/null
+++ b/src/assets/images/dry/tmfengxiangsheng.gif
Binary files differ
diff --git a/src/assets/images/dry/tmrefeng2.gif b/src/assets/images/dry/tmrefeng2.gif
new file mode 100644
index 0000000..b6e9fa0
--- /dev/null
+++ b/src/assets/images/dry/tmrefeng2.gif
Binary files differ
diff --git a/src/assets/images/dry/yaocai/baihuasheshecao.png b/src/assets/images/dry/yaocai/baihuasheshecao.png
new file mode 100644
index 0000000..494e0be
--- /dev/null
+++ b/src/assets/images/dry/yaocai/baihuasheshecao.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai/machixian.png b/src/assets/images/dry/yaocai/machixian.png
new file mode 100644
index 0000000..5b79945
--- /dev/null
+++ b/src/assets/images/dry/yaocai/machixian.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai/mohanlian.png b/src/assets/images/dry/yaocai/mohanlian.png
new file mode 100644
index 0000000..e76a9e1
--- /dev/null
+++ b/src/assets/images/dry/yaocai/mohanlian.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai/mohanlian1.png b/src/assets/images/dry/yaocai/mohanlian1.png
new file mode 100644
index 0000000..2abfa03
--- /dev/null
+++ b/src/assets/images/dry/yaocai/mohanlian1.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai/sangbaipi.png b/src/assets/images/dry/yaocai/sangbaipi.png
new file mode 100644
index 0000000..188f673
--- /dev/null
+++ b/src/assets/images/dry/yaocai/sangbaipi.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai/sangbaipi1.png b/src/assets/images/dry/yaocai/sangbaipi1.png
new file mode 100644
index 0000000..748e829
--- /dev/null
+++ b/src/assets/images/dry/yaocai/sangbaipi1.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai/yaocai1.png b/src/assets/images/dry/yaocai/yaocai1.png
new file mode 100644
index 0000000..b969740
--- /dev/null
+++ b/src/assets/images/dry/yaocai/yaocai1.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai/yinyanghuo.png b/src/assets/images/dry/yaocai/yinyanghuo.png
new file mode 100644
index 0000000..bd88ed9
--- /dev/null
+++ b/src/assets/images/dry/yaocai/yinyanghuo.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai/yinyanghuo1.png b/src/assets/images/dry/yaocai/yinyanghuo1.png
new file mode 100644
index 0000000..19fad9c
--- /dev/null
+++ b/src/assets/images/dry/yaocai/yinyanghuo1.png
Binary files differ
diff --git a/src/assets/images/dry/yaocai1.png b/src/assets/images/dry/yaocai1.png
new file mode 100644
index 0000000..b969740
--- /dev/null
+++ b/src/assets/images/dry/yaocai1.png
Binary files differ
diff --git a/src/assets/images/dry/zanting.png b/src/assets/images/dry/zanting.png
new file mode 100644
index 0000000..6d9b552
--- /dev/null
+++ b/src/assets/images/dry/zanting.png
Binary files differ
diff --git a/src/assets/images/dry/zhuangwangban-1.gif b/src/assets/images/dry/zhuangwangban-1.gif
new file mode 100644
index 0000000..b54a403
--- /dev/null
+++ b/src/assets/images/dry/zhuangwangban-1.gif
Binary files differ
diff --git a/src/assets/images/dry/zhuangwangban-N.gif b/src/assets/images/dry/zhuangwangban-N.gif
new file mode 100644
index 0000000..8992c07
--- /dev/null
+++ b/src/assets/images/dry/zhuangwangban-N.gif
Binary files differ
diff --git a/src/assets/images/dry/zhuangwangban.gif b/src/assets/images/dry/zhuangwangban.gif
index e2e1e55..1fd022b 100644
--- a/src/assets/images/dry/zhuangwangban.gif
+++ b/src/assets/images/dry/zhuangwangban.gif
Binary files differ
diff --git a/src/main.ts b/src/main.ts
index 5fe8d56..b0b58a7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,7 +20,7 @@
import { setupStore } from '/@/store'
// 娉ㄥ唽online妯″潡lib
import { registerPackages } from '/@/utils/monorepo/registerPackages'
-
+import DataVVue3 from '@kjgl77/datav-vue3'
// 鍦ㄦ湰鍦板紑鍙戜腑寮曞叆鐨�,浠ユ彁楂樻祻瑙堝櫒鍝嶅簲閫熷害
if (import.meta.env.DEV) {
import('ant-design-vue/dist/antd.less')
@@ -64,7 +64,7 @@
// 褰撹矾鐢卞噯澶囧ソ鏃跺啀鎵ц鎸傝浇( https://next.router.vuejs.org/api/#isready)
await router.isReady()
-
+ app.use(DataVVue3)
// 鎸傝浇搴旂敤
app.mount('#app', true)
}
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index b31d73a..a040930 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -39,6 +39,22 @@
},
}
+export const BigScreen: AppRouteRecordRaw = {
+ path: '/bigScreen',
+ name: 'BigScreen',
+ component: () => import('/@/views/dry/bigScreen/BigWorkShop.vue'),
+ meta: {
+ title: t('big.screen.workshop'),
+ },
+}
+export const BigEqp: AppRouteRecordRaw = {
+ path: '/bigEqp',
+ name: 'BigEqp',
+ component: () => import('/@/views/dry/bigScreen/BigEqp.vue'),
+ meta: {
+ title: t('big.screen.eqp'),
+ },
+}
//update-begin---author:wangshuai ---date:20220629 for锛歛uth2鐧诲綍椤甸潰璺敱------------
export const Oauth2LoginRoute: AppRouteRecordRaw = {
path: '/oauth2-app/login',
@@ -66,4 +82,4 @@
}
// Basic routing without permission
-export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute]
+export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigEqp]
diff --git a/src/views/dry/bigScreen/BigEqp copy.vue b/src/views/dry/bigScreen/BigEqp copy.vue
new file mode 100644
index 0000000..988f06c
--- /dev/null
+++ b/src/views/dry/bigScreen/BigEqp copy.vue
@@ -0,0 +1,1921 @@
+<template>
+ <dv-full-screen-container>
+ <div ref="domRef" class="eqpBox">
+ <div class="eqpRow">
+ <div class="eqpImage" :style="{'background-position':position + 'px'}">
+
+ <div class="leftEqp" @click="toggleDom" >
+ <div style="width: 350px; ">
+ <div class="herbInfo">
+
+ <dv-border-box7 class="curEqp">
+ <div class="eqpName" style="padding: 30px">
+ <div class="mainInfo" style="font-size: 26px">{{ eqp.name }}</div>
+ <div class="subhead">{{ eqp.type }}</div>
+ <dv-decoration-1 style="width:300px;height:90px; margin-left: 20px;" />
+ <!-- 璁惧锛歿{ eqp.name }}</div>
+ <div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> -->
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="curHerb">
+ <div class="eqpName" style="margin-left: 176px; height: 190px">
+ <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
+ <div class="subhead">骞茬嚗閰嶆柟</div>
+ </div>
+ <div class="formula">
+ <div class="formulaItem">
+ <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.feed }}绛�</div>
+ <div class="subhead2">鎶曟枡閲�</div>
+ </div>
+ </div>
+ <div class="formulaItem">
+ <Icon style="color: red" icon="bx:wind" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.windTemp }}掳C</div>
+ <div class="subhead2">鐑</div>
+ </div>
+ </div>
+ <div class="formulaItem">
+ <Icon style="color: green" icon="tabler:target-arrow" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.target }}%</div>
+ <div class="subhead2">鐩爣</div>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="eqpName">{{ realData?.herbName }}</div>
+ <div class="eqpName">{{ realData?.feed }} 绛�</div> -->
+ </dv-border-box7>
+ </div>
+ <dv-border-box7 class="infoChart">
+ <div class="chartTittle">鍚按鐜�</div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 50%">
+ <div class="centerText">
+ <div class="mainInfo3"
+ ><span>{{ realData?.target }}</span
+ >%
+ </div>
+ <div class="subhead2">鐩爣鍚按鐜�</div>
+ </div>
+ </div>
+ <div class="center" style="height: 50%">
+ <div>
+ <div class="mainInfo3"
+ ><span>{{ realData?.initial }}</span
+ >%</div
+ >
+ <div class="subhead2">鏉ユ枡鍚按鐜�</div>
+ </div>
+ </div>
+ </div>
+ <div id="moisture" style="width: 170px; height: 170px"></div>
+ </div>
+ <div class="subhead2" style="margin-top: -37px; padding-left: 172px; font-weight: bold;">瀹炴椂鍚按鐜�</div>
+ </dv-border-box7>
+ <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
+ <div class="chartTittle">椋庢満棰戠巼</div>
+ <div class="outDiv" style="padding-top: 10px">
+ <div id="fanFreq" style="width: 240px; height: 240px"></div>
+ </div>
+ </dv-border-box7> -->
+ </div>
+ <dv-border-box7 class="leftTop">
+ <div class="leftTop0">
+ <div class="leftTop1">
+ <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+ <div>
+ <div class="mainInfo">{{ realData?.remain | 0 }}min</div>
+ <div class="subhead">鍓╀綑鏃堕棿</div>
+ </div>
+ </div>
+ <div class="leftTop1">
+ <!-- <Icon icon="mdi:chart-finance" :size="50" />
+ <div>
+ <div class="mainInfo">98 %</div>
+ <div class="subhead">骞茬嚗鏁堢巼</div>
+ </div> -->
+ </div>
+ <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + realData?.gif + '.gif)' }"></div>
+ <div class="outDiv eqpStatus">
+ <div
+ style="
+ font-size: 28px;
+ margin-top: 190px;
+ color: white;
+ background-color: #1595ea;
+ height: 60px;
+ width: 180px;
+ line-height: 60px;
+ text-align: center;
+ border-radius: 5px;
+ font-weight: bold;
+ "
+ >
+ 姝ｅ湪骞茬嚗
+ </div>
+ <div
+ class="eqpInfoText blingbling"
+ style="
+ position: absolute;
+ font-size: 30px;
+ max-height: 200px;
+ max-width: 720px;
+ border-radius: 10px;
+ background-color: #ce0000;
+ color: white;
+ padding: 10px;
+ "
+ >
+ <div class="outDiv">
+ <div><Icon icon="bx:error" :size="30" /> </div>
+ <div><span> 鏈変竴涓晠闅滐紝璇锋鏌ユ満鍣ㄣ��</span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="infoChart">
+ <div class="chartTittle">椋庣娓╁害</div>
+ <div class="outDiv">
+ <div id="bellowsTemp" style="width: 230px; height: 230px">
+ <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="leftMid">
+ <div id="efficiencyLine" style="width: 848px; height: 190px"></div>
+ <div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between">
+ <div style="width: 100px; height: 20px">0 min</div>
+ <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
+ </div>
+ <div id="progressBar" style="width: 848px; height: 80px"></div>
+ </dv-border-box7>
+
+ <!-- <div class="outDiv">
+ <div style="height: 100px; width: 400px">
+ <Progress
+ :stroke-color="{
+ from: '#108ee9',
+ to: '#87d068',
+ }"
+ :percent="realData?.percent"
+ status="active"
+ :show-info="false"
+ />
+ <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
+ <span>骞茬嚗 52 Min</span>
+ <span>棰勮 120 Min</span>
+ </div>
+ </div>
+ </div> -->
+ </div>
+ <div class="rightInfo">
+ <div class="rightTop">
+
+ <dv-border-box7 class="tempMoisChart">
+ <div :id="'moisChart'" style="width: 690px; height: 420px"></div>
+ </dv-border-box7>
+ </div>
+ <div class="rightTwo">
+
+
+ <dv-border-box7 class="infoChart">
+ <div class="chartTittle">
+ 骞茬嚗鏁堢巼(kg/h)
+ <div class="rightLabel">
+ <div class="label good">>{{ standard.xiaolv }} 浼� </div>
+ <div class="label bad"><{{ standard.xlMin }} 宸�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 50%">
+ <div class="centerText">
+ <div class="mainInfo3"
+ ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span
+ >kg
+ </div>
+ <div class="subhead2">姘村垎钂稿彂</div>
+ </div>
+ </div>
+ <div class="center" style="height: 50%">
+ <div>
+ <div class="mainInfo3">{{ realData?.dryTime | 0 }}min</div>
+ <div class="subhead2">骞茬嚗鐢ㄦ椂</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{ standard.xiaolv }}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
+ </div>
+ <div style="line-height: 20px">
+ 棰濆畾
+ <br />
+ 鏁堢巼
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{ realData?.xiaolv | 0 }}</div>
+ <div class="barBack">
+ <div
+ class="barDiv"
+ :class="{ good: realData?.xlgood, bad: realData?.xlbad }"
+ :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]"
+ >
+ </div>
+ </div>
+ <div style="line-height: 20px">
+ 瀹炴椂
+ <br />
+ 鏁堢巼
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+
+ <dv-border-box7 class="infoChart">
+ <div class="chartTittle"
+ >钂告苯娑堣��(m鲁/kg)
+ <div class="rightLabel">
+ <div class="label bad">>{{ standard.zhengqi }} 宸�</div>
+ <div class="label good"><{{ standard.zqMin }} 浼�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 100%">
+ <div class="centerText">
+ <div class="mainInfo3"><span>{{realData?.steam}}</span>m鲁 </div>
+ <div class="subhead2">钂告苯鐢ㄩ噺</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{standard.zhengqi}}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
+ </div>
+ <div style="line-height: 20px">
+ 棰濆畾
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{realData?.zhengqi | 0 }}</div>
+ <div class="barBack">
+ <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
+ :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
+ </div>
+ <div style="line-height: 20px">
+ 瀹炴椂
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="infoChart">
+ <div class="chartTittle">
+ <div> 鐢佃兘娑堣��(kw/h/kg)</div>
+ <div class="rightLabel">
+ <div class="label bad">>{{ standard.dian }} 宸�</div>
+ <div class="label good"><{{ standard.dMin }} 浼�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 100%">
+ <div class="centerText">
+ <div class="mainInfo3"><span>{{realData?.watt}}</span>kw/h </div>
+ <div class="subhead2">鐢佃兘鐢ㄩ噺</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{standard.dian}}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
+ </div>
+ <div style="line-height: 20px">
+ 棰濆畾
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{realData?.dian | 0}}</div>
+ <div class="barBack">
+ <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
+ :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
+ </div>
+ <div style="line-height: 20px">
+ 瀹炴椂
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</dv-full-screen-container>
+</template>
+
+<script setup lang="ts">
+ import { useFullscreen } from '@vueuse/core';
+ import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
+ import { router } from '/@/router'
+ import { onMounted, ref, onUnmounted } from 'vue'
+ import { Progress } from 'ant-design-vue'
+ import * as echarts from 'echarts'
+ import 'echarts-liquidfill'
+ import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
+ import { defHttp } from '/@/utils/http/axios'
+ import { queryById,listAll } from '../api/DryEquipment.api'
+ import { dryEquipment } from '../dataDefine/DryEquipment.data'
+ import { useUserStore } from '/@/store/modules/user'
+ const domRef = ref<Nullable<HTMLElement>>(null);
+ const { enter, toggle, exit, isFullscreen } = useFullscreen();
+
+const { toggle: toggleDom } = useFullscreen(domRef);
+ const Timer = ref()
+ const Timer2 = ref()
+ 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',
+ })
+ const eqps = ref([] as dryEquipment[])
+ const eqp = ref({} as dryEquipment)
+ const eqpNum = ref(0)
+ const userStore = useUserStore()
+ const realData = ref({})
+ const standard = ref({
+ xiaolv: 220,
+ xlMin: 200,
+ zhengqi: 50,
+ zqMin: 45,
+ dian: 8,
+ dMin: 7.5,
+ })
+
+ const position = ref(1)
+ //realData.value.tempValue = [0, 100]
+ realData.value.mois = [0.5, 0.35, 0.2]
+ var moisChart: echarts.ECharts
+ var waterChart: echarts.ECharts
+
+ var bellowsTempChart: echarts.ECharts
+ var fanFreqChart: echarts.ECharts
+ var progressBarChart: echarts.ECharts
+ var efficiencyLineChart: echarts.ECharts
+
+ function initCharts() {
+ let domId = 'moisChart'
+ let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
+ let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
+ let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
+ let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
+ let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
+ let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
+ // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
+ moisChart = echarts.init(chartDom)
+ waterChart = echarts.init(waterDom)
+ bellowsTempChart = echarts.init(bellowsTempDom)
+ fanFreqChart = echarts.init(fanFreqDom)
+ progressBarChart = echarts.init(progressBarDom)
+ efficiencyLineChart = echarts.init(efficiencyLineDom)
+
+ const option = {
+ color: ['#2C4D90', '#CE0000'],
+ title: {
+ text: '鍚按鐜�/娓╁害瓒嬪娍',
+ textStyle: {
+ color: '#fff',
+ fontSize: 15
+ },
+
+ },
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ left: 50,
+ right: 70,
+ top: 50,
+ bottom: 60,
+ },
+ legend: {
+ right: 60,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ // toolbox: {
+ // show: true,
+ // feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none',
+ // },
+ // dataView: { readOnly: false },
+ // magicType: { type: ['line', 'bar'] },
+ // restore: {},
+ // saveAsImage: {},
+ // },
+ // },
+ xAxis: {
+ type: 'value',
+ axisLabel:{
+ color: '#fff'
+ },
+ //boundaryGap: false,
+ // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ min: 0,
+ max: function (value) {
+ if (value.max < 100) {
+ return 100
+ } else {
+ return value.max
+ }
+ },
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: ['10%', '10%'],
+ axisLabel:{
+ color: '#fff'
+ }
+ // min: 0,
+ // max: function (value) {
+ // if (value.max < 100) {
+ // return 100
+ // } else {
+ // return value.max
+ // }
+ // },
+ },
+ // yAxis: {
+ // type: 'value',
+ // axisLabel: {
+ // formatter: '{value} 掳C',
+ // },
+ // },
+ series: [
+ {
+ name: '鍚按鐜�',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ data: [
+ [1, 1],
+ [2, 2],
+ ],
+ lineStyle: {
+ width: 1,
+ },
+ markLine: {
+ data: [{ type: 'average', name: 'Avg' }],
+ },
+ },
+ {
+ name: '娓╁害',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ data: [
+ [1, 10],
+ [2, 20],
+ ],
+ lineStyle: {
+ width: 1,
+ },
+ // markLine: {
+ // data: [
+ // { type: 'average', name: 'Avg' },
+ // [
+ // {
+ // symbol: 'none',
+ // x: '90%',
+ // yAxis: 'max',
+ // },
+ // {
+ // symbol: 'circle',
+ // label: {
+ // position: 'start',
+ // formatter: 'Max',
+ // },
+ // type: 'max',
+ // name: '鏈�楂樼偣',
+ // },
+ // ],
+ // ],
+ // },
+ },
+ ],
+ }
+ const waterOption = {
+ series: [
+ {
+ type: 'liquidFill',
+ radius: '100%',
+ //waveAnimation: false,
+ amplitude: 3,
+ animationDuration: 5,
+ //animationDurationUpdate: 0,
+ data: [0.56,0.44,0.32],
+ 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: 20,
+ //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
+ },
+ },
+ ],
+ }
+
+ const bellowsOption = {
+ series: [
+ {
+ type: 'gauge',
+ center: ['50%', '60%'],
+ startAngle: 215,
+ endAngle: -35,
+ min: 0,
+ max: 80,
+ splitNumber: 8,
+ itemStyle: {
+ color: '#FFAB91',
+ },
+ progress: {
+ show: true,
+ width: 10,
+ },
+ pointer: {
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ width: 10,
+ },
+ },
+ axisTick: {
+ distance: -15,
+ splitNumber: 5,
+ length: 3,
+ lineStyle: {
+ width: 1,
+ color: '#999',
+ },
+ },
+ splitLine: {
+ distance: -18,
+ length: 6,
+ lineStyle: {
+ width: 2,
+ color: '#999',
+ },
+ },
+ axisLabel: {
+ distance: -13,
+ color: '#fff',
+ fontSize: 12,
+ },
+ anchor: {
+ show: false,
+ },
+ title: {
+ show: false,
+ },
+ detail: {
+ valueAnimation: true,
+ width: '60%',
+ lineHeight: 40,
+ borderRadius: 8,
+ offsetCenter: [0, '0%'],
+ fontSize: 20,
+ fontWeight: 'bolder',
+ formatter: '{value}掳C',
+ color: 'inherit',
+ },
+ data: [
+ {
+ value: 20,
+ },
+ ],
+ },
+ {
+ type: 'gauge',
+ center: ['50%', '60%'],
+ startAngle: 215,
+ endAngle: -35,
+ min: 0,
+ max: 80,
+ itemStyle: {
+ color: '#FD7347',
+ },
+ progress: {
+ show: true,
+ width: 3,
+ },
+ pointer: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ detail: {
+ show: false,
+ },
+ data: [
+ {
+ value: 20,
+ },
+ ],
+ },
+ ],
+ }
+
+ const fanFreqOption = {
+ series: [
+ {
+ type: 'gauge',
+ progress: {
+ show: true,
+ width: 9,
+ },
+ axisLine: {
+ lineStyle: {
+ width: 9,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ distance: 3,
+ length: 4,
+ lineStyle: {
+ width: 1,
+ color: '#999',
+ },
+ },
+ axisLabel: {
+ distance: 15,
+ color: '#999',
+ fontSize: 10,
+ },
+ anchor: {
+ show: true,
+ showAbove: true,
+ size: 10,
+ itemStyle: {
+ borderWidth: 3,
+ },
+ },
+ title: {
+ show: false,
+ },
+ detail: {
+ valueAnimation: true,
+ fontSize: 20,
+ offsetCenter: [0, '70%'],
+ formatter: '{value}Hz',
+ },
+ data: [
+ {
+ value: 56,
+ },
+ ],
+ },
+ ],
+ }
+ // const weightOption = {
+ // // title: {
+ // // text: 'Referer of a Website',
+ // // subtext: 'Fake Data',
+ // // left: 'center'
+ // // },
+ // color: ['#1595EA', '#2C4D90', '#FF7F7F'],
+ // tooltip: {
+ // trigger: 'item',
+ // },
+ // radius: [0, '85%'],
+ // // grid: {
+ // // top: 20,
+ // // left: 20,
+ // // right: 20,
+ // // bottom: 20,
+ // // },
+ // // legend: {
+ // // orient: 'vertical',
+ // // left: 'left',
+ // // },
+ // series: [
+ // {
+ // name: '閲嶉噺鏁版嵁',
+ // type: 'pie',
+ // radius: '50%',
+ // data: [
+ // { value: 1048, name: '鍓╀綑閲嶉噺' },
+ // { value: 735, name: '鐑樺幓閲嶉噺' },
+ // ],
+ // label: {
+ // show: false,
+ // },
+ // labelLine: {
+ // show: false,
+ // },
+ // emphasis: {
+ // itemStyle: {
+ // shadowBlur: 10,
+ // shadowOffsetX: 0,
+ // shadowColor: 'rgba(0, 0, 0, 0.5)',
+ // },
+ // },
+ // },
+ // ],
+ // }
+
+ const progressBarOption = {
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // // Use axis to trigger tooltip
+ // type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+ // },
+ // },
+ // color: [
+ // '#0653F6',
+ // // '#1B61E7',
+ // '#3673D5',
+ // // '#4A80C8',
+ // '#608FB8',
+ // // '#719BAD',
+ // '#82A6A1',
+ // // '#8DAD9A',
+ // '#9CB790',
+ // // '#A7BE88',
+ // '#B3C681',
+ // '#CAD671',
+ // '#DBE165',
+ // ],
+ animation: false, // 鍏抽棴鍔ㄧ敾
+ color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'],
+ grid: {
+ top: '12%',
+ left: '20',
+ right: '55',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ min: 0,
+ max: 150,
+ show: false,
+ type: 'value',
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ yAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'category',
+ data: ['鏃堕棿'],
+ },
+ series: [
+ // {
+ // name: '绗竴闃舵',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // barWidth: 26,
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [30],
+ // },
+ // {
+ // name: '绗簩闃舵',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [30],
+ // },
+ // {
+ // name: 'Affiliate Ad',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [20],
+ // },
+ // {
+ // name: 'Video Ad',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [15],
+ // },
+ // {
+ // name: 'Search Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [10],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [5],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [5],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [
+ // {
+ // value: 35,
+ // itemStyle: {
+ // color: '#c0c0c0',
+ // },
+ // },
+ // ],
+ // },
+ ],
+ }
+
+ const efficiencyLineOption = {
+ title: {},
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: '20%',
+ left: '17',
+ right: '57',
+ bottom: '0%',
+ containLabel: true,
+ },
+ legend: {
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ xAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'value',
+ min: 0,
+ max: 150,
+ // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1],
+ },
+ yAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'value',
+ axisLabel: {
+ formatter: '{value} 掳C',
+ },
+ },
+ series: [
+ {
+ name: '骞茬嚗鏁堢巼',
+ type: 'line',
+ lineStyle: {
+ width: 1,
+ },
+ // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
+ data: [
+ [0, 1],
+ [15, 10],
+ [45, 11],
+ [70, 6],
+ ],
+ markPoint: {
+ data: [
+ { type: 'max', name: 'Max' },
+ { type: 'min', name: 'Min' },
+ ],
+ },
+ // markLine: {
+ // data: [{ type: 'average', name: 'Avg' }],
+ // },
+ },
+ ],
+ }
+
+ option && moisChart.setOption(option)
+ waterOption && waterChart.setOption(waterOption)
+ bellowsOption && bellowsTempChart.setOption(bellowsOption)
+ fanFreqOption && fanFreqChart.setOption(fanFreqOption)
+
+ progressBarOption && progressBarChart.setOption(progressBarOption)
+ efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
+ }
+
+ function queryEqp() {
+ queryById({ id: router.currentRoute.value.params.id }).then((res) => {
+ // console.log(`output->res`, res)
+ eqp.value = res
+ queryRealTime()
+ setTimeout(initCharts, 500)
+ })
+ }
+
+ function listAllEqp() {
+ listAll({ enable: 'Y' })
+ .then((result) => {
+ console.log(`output->result`, result)
+ eqps.value = result
+ queryRealTime()
+ setTimeout(initCharts, 500)
+
+ })
+ .catch((err) => {
+ console.log(`output->err`, err)
+ })
+ }
+
+
+ var num = 0;
+
+
+ // function queryEqpsReal() {
+
+ // if (eqps.value.length > 0) {
+ // var i = num%eqps.value.length
+ // eqp.value = eqps[i]
+ // console.log("777",i);
+ // console.log("888",eqp.value);
+ // queryRealTime()
+ // setTimeout(initCharts, 500)
+ // }
+ // num ++;
+ // }
+
+ function queryRealTime() {
+
+ if (eqp.value) {
+ eqp.value = eqps.value[eqpNum.value]
+ console.log("888",eqp.value);
+ let tenantId = 1003
+ let eqpCode = eqp.value.code
+ let queryRealTimeUrl = '/dry/real/getRealTimeData'
+ defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
+
+ if (res && res.trendVo) {
+ console.log(`output->re11s`, res)
+ // 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),
+ ]
+ if (waterChart) {
+ waterChart.setOption({
+ series: [
+ {
+ data: res.mois,
+ label: {
+ formatter: function () {
+ return res.trendVo.moisture + '%'
+ },
+ fontSize: 20,
+ },
+ },
+ ],
+ })
+ }
+
+ /**娓╁害鐜舰鍥� */
+ if (bellowsTempChart) {
+ bellowsTempChart.setOption({
+ series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }],
+ })
+ }
+ /**椋庢満棰戠巼鐜舰鍥� */
+ if (fanFreqChart) {
+ fanFreqChart.setOption({
+ series: [
+ {
+ data: [
+ {
+ value: res.trendVo.fanFrequency,
+ },
+ ],
+ },
+ ],
+ })
+ }
+ /**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */
+ if (res && res.detailList) {
+ var progressSeries = []
+ var ganZaoXiaoLv = []
+ var zhengQiXiaoHao = []
+ var dianNengXiaoHao = []
+ var totalTime = 0
+ var beforeWeight = 0
+ res.moisList = []
+ beforeWeight = res.originWeight
+ console.log(`output->res`, res)
+ res.detailList.forEach((item) => {
+ //console.log(`output->item`, item)
+ res.moisList.push([item.totalTime, item.moisture])
+ console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
+ var curDryTime = item.totalTime - totalTime
+
+ if (curDryTime > 0) {
+ progressSeries.push({
+ name: item.moisture,
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [item.totalTime - totalTime],
+ })
+ ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])
+
+ totalTime = item.totalTime
+ }
+ beforeWeight = item.weight
+ })
+
+ if (res.remain) {
+ if (res.dryTime - totalTime > 0) {
+ progressSeries.push({
+ name: '褰撳墠',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [
+ {
+ value: res.dryTime - totalTime,
+ },
+ ],
+ })
+ }
+
+ progressSeries.push({
+ name: '鍓╀綑',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [
+ {
+ value: res.remain - (res.dryTime - totalTime),
+ itemStyle: {
+ color: '#c0c0c0',
+ },
+ },
+ ],
+ })
+ }
+
+ /**骞茬嚗杩涘害 */
+ if (progressBarChart) {
+ console.log(`output->progressSeries`, progressSeries)
+ progressBarChart.setOption(
+ {
+ xAxis: {
+ max: totalTime + res.remain,
+ },
+ series: progressSeries,
+ },
+ { replaceMerge: ['series'] }
+ )
+ }
+
+ res.totalTime = totalTime + res.remain
+ /**骞茬嚗鏁堢巼銆佹秷鑰� */
+ if (efficiencyLineChart) {
+ console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
+ efficiencyLineChart.setOption({
+ xAxis: {
+ max: totalTime + res.remain,
+ },
+ series: [{ data: ganZaoXiaoLv }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
+ })
+ }
+
+ res.moisList.push([res.dryTime, res.trendVo.moisture])
+ }
+
+ /**娓╁害瓒嬪娍 */
+ if (res && res.bellowsTemp) {
+ Array.from(Object.entries(res.bellowsTemp))
+ var arr = Object.keys(res.bellowsTemp)
+ var temArr = []
+ arr.forEach((item) => {
+ temArr.push([item * 1, res.bellowsTemp[item]])
+ })
+
+ //console.log(`output->arr` + JSON.stringify(temArr))
+ res.tempArr = temArr
+ }
+
+ /**骞茬嚗杩囩▼瓒嬪娍 */
+ if (moisChart) {
+ //console.log(`output->鏇存柊chart`)
+ moisChart.setOption({
+ series: [
+ {
+ data: res.moisList,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '鐩爣',
+ yAxis: res.target,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}%',
+ },
+ },
+ },
+ {
+ data: res.tempArr,
+ },
+ ],
+ })
+ }
+
+ /**鏁堢巼瀵规瘮鍥� */
+ res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
+ if (res.xiaolv > standard.value.xiaolv) {
+ res.xlgood = true
+ res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
+ res.xlrHeight = '100%'
+ } else if (res.xiaolv < standard.value.xlMin) {
+ res.xlbad = true
+ res.xlsHeight = '100%'
+ res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
+ }
+
+
+
+ /** 钂告苯娑堣�� */
+ res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
+ if (res.zhengqi > standard.value.zhengqi) {
+ res.zqgood = true
+ res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%'
+ res.zqrHeight = '100%'
+ } else if (res.zhengqi < standard.value.zqMin) {
+ res.zqbad = true
+ res.zqsHeight = '100%'
+ res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
+ }
+
+
+ /** 鐢佃兘娑堣�� */
+ res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
+ if (res.dian > standard.value.dian) {
+ res.dngood = true
+ res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
+ res.dnrHeight = '100%'
+ } else if (res.dian < standard.value.dMin) {
+ res.dnbad = true
+ res.dnsHeight = '100%'
+ res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
+ }
+
+ /**gif鍔ㄥ浘 */
+ res.gif = 'tmrefeng2'
+ } else {
+ res = {
+ mois: [],
+ }
+ }
+ console.log(`output->res`, res)
+ realData.value = res
+ })
+ }
+ }
+
+ var move = true;
+ function moveImage() {
+
+ if (move) {
+ position.value -= 0.3
+ } else {
+ position.value += 0.3
+ }
+ if(position.value < -240 ) {
+ move = false
+ }
+ if (position.value > -1) {
+ move = true
+ }
+
+
+ }
+
+ listAllEqp()
+ //queryEqp()
+ // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛�
+ onMounted(() => {
+ Timer.value = setInterval(queryRealTime, 3000)
+ Timer2.value = setInterval(moveImage, 50)
+ })
+
+ onUnmounted(() => {
+ clearInterval(Timer.value)
+ clearInterval(Timer2.value)
+ Timer.value = null
+ Timer2.value = null
+ })
+</script>
+
+<style scoped>
+ .eqpBox {
+ height: 100%;
+ }
+ .eqpRow {
+ }
+ .eqpImage {
+ height: 1080px;
+ width: 1920px;
+ background-image: url(/src/assets/images/dry/bg.png);
+ background-repeat: no-repeat;
+ color: white;
+ /*background-position: 160px 280px; */
+ /* background-color: red; */
+ background-size: 120%;
+ padding: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ }
+
+ .leftEqp {
+ height: 1080px;
+ width: 1200px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+
+ /* background-color: white;
+ background-image: url(/src/assets/images/dry/shebei1.png);
+ background-repeat: no-repeat;
+ background-size: 125%;
+ border-radius: 10px;
+ background-position: -119px 293px; */
+ }
+
+ .leftTop {
+ height: 750px;
+ width: 850px;
+ display: flex;
+ justify-content: center;
+ align-content: flex-start;
+ background-image: url(/src/assets/images/dry/ganzaoji-x.png);
+ background-repeat: no-repeat;
+ background-size: 79%;
+ border-radius: 10px;
+ flex-wrap: wrap;
+ background-position: 85px 279px;
+
+ }
+ .leftMid {
+ padding-top: 10px;
+ width: 850px;
+ height: 300px;
+ /* border: 1px solid; */
+ margin-top: 10px;
+ border-radius: 10px;
+ /* background: white; */
+ }
+ .mainInfo {
+ line-height: 33px;
+ padding-left: 10px;
+ font-size: 30px;
+ color: white;
+ }
+ .subhead {
+ color: #a19f9c;
+ font-size: 16px;
+ padding-left: 10px;
+ }
+
+ .mainInfo2 {
+ line-height: 20px;
+ padding-left: 0px;
+ font-size: 16px;
+ }
+ .subhead2 {
+ color: #a19f9c;
+ font-size: 10px;
+ padding-left: 0px;
+ }
+ .zhengqi {
+ height: 180px;
+ width: 200px;
+ background-image: url(/src/assets/images/dry/liuliangji.png);
+ background-repeat: no-repeat;
+ background-size: 160px;
+ /* border-radius: 10px; */
+ background-position: 17px -6px;
+ }
+
+ .liuliangji {
+ }
+ .leftData {
+ height: 250px;
+ width: 120px;
+ }
+ .rightChart {
+ height: 270px;
+ width: 170px;
+ margin-top: -30px;
+ }
+ .leftTop0 {
+ height: 600px;
+ width: 848px;
+ display: flex;
+ justify-content: center;
+ align-content: flex-start;
+ flex-wrap: wrap;
+ }
+ .leftTop1 {
+ width: 250px;
+ height: 200px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px;
+ color: #727272;
+
+ }
+ .leftTop2 {
+ width: 250px;
+ height: 200px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px;
+ color: #727272;
+ }
+ .leftTop3 {
+ width: 340px;
+ height: 200px;
+ /* background-image: url(/src/assets/images/dry/fanliao.gif); */
+ background-repeat: no-repeat;
+ background-position: 0px 20px;
+ background-size: 300px;
+ border-radius: 50px;
+ }
+
+ .eqpStatus {
+ width: 848px;
+ height: 300px;
+
+ padding: 100px;
+ }
+ .rightInfo {
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ height: 1060px;
+ width: 700px;
+ }
+
+ .rightTop {
+ display: flex;
+ height: 440px;
+ padding-left: 10px;
+ }
+ .rightTwo {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .infoChart {
+ width: 340px;
+ height: 300px;
+ /* background: white; */
+ margin-left: 10px;
+ margin-top: 10px;
+ border-radius: 10px;
+ }
+ .chartTittle {
+ width: 340px;
+ height: 30px;
+ font-size: 16px;
+ display: flex;
+ justify-content: space-between;
+ padding: 15px 15px;
+ }
+ .chartInfo {
+ width: 60px;
+ height: 180px;
+ }
+
+ .compareBar {
+ width: 55px;
+ height: 140px;
+ }
+ .margintop-30 {
+ margin-top: -30px;
+ }
+
+ .barTop {
+ width: 55px;
+ height: 30px;
+ }
+ .barBack {
+ width: 30px;
+ height: 100px;
+ /* border: 1px solid black; */
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-end;
+ }
+ .barDiv {
+ width: 100%;
+
+ background-color: #1595ea;
+ }
+ .bad {
+ background-color: #ed6f6f;
+ }
+ .rightLabel {
+ width: 110px;
+ display: flex;
+ justify-content: space-between;
+ }
+ .label {
+ color: white;
+ text-align: center;
+ width: 50px;
+ border-radius: 4px;
+ height: 20px;
+ font-size: 10px;
+ line-height: 21px;
+ }
+ .good {
+ background-color: #2ecf54;
+ }
+
+ .mainInfo3 {
+ font-size: 24px;
+ }
+ .herbInfo {
+ width: 340px;
+ height: 440px;
+ color: #727272;
+ }
+
+ .curEqp {
+ width: 340px;
+ height: 170px;
+ /* background: white;
+ border-radius: 10px; */
+ }
+ .curHerb {
+ margin-top: 10px;
+ width: 340px;
+ height: 260px;
+ /* background: white;
+ border-radius: 10px; */
+ background-image: url(/src/assets/images/dry/yaocai1.png);
+ background-repeat: no-repeat;
+ background-size: 61%;
+ background-position: 0px 10px;
+ }
+ .tempMoisChart {
+ width: 690px;
+ height: 440px;
+ /* background: white; */
+
+ padding: 20px;
+ border-radius: 10px;
+ }
+ .topLeft {
+ margin: 20px 40px 60px 20px;
+ padding: 15px;
+ /* background: white; */
+ border-radius: 10px;
+ height: 325px;
+ width: 440px;
+ /* background-image: url(/src/assets/images/dry/yaocai.jpg); */
+ background-repeat: no-repeat;
+ background-size: 164px 132px;
+ background-position: 239px 65px;
+ display: flex;
+ }
+ .topMid {
+ margin: 20px 20px 60px 40px;
+ /* background: white; */
+ border-radius: 10px;
+ background-image: url(/src/assets/images/dry/fanliao.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 20px;
+ background-size: 400px;
+ width: 400px;
+
+ padding: 20px;
+ }
+ .topRight {
+ margin: 20px 20px 60px 20px;
+ /* background: white; */
+ border-radius: 10px;
+ width: 700px;
+ padding: 20px;
+ }
+ .midLeft {
+ height: 450px;
+ width: 600px;
+ display: flex;
+ padding: 0 20px 20px 20px;
+ }
+ .midMid {
+ width: 500px;
+ padding-top: 50px;
+ }
+
+ .midRight {
+ background-image: url(/src/assets/images/dry/fengjixz.gif);
+ background-repeat: no-repeat;
+ background-position: 150px 260px;
+ background-size: 120px 120px;
+ width: 600px;
+ }
+
+ .shangJianTou {
+ margin-left: 140px;
+ width: 70px;
+ height: 100px;
+ background-image: url(/src/assets/images/dry/shangjiantoutou.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ background-size: 70px 100px;
+ }
+
+ .zoujiantou {
+ margin-left: 225px;
+ margin-top: 30px;
+ width: 100px;
+ height: 70px;
+ background-image: url(/src/assets/images/dry/zuojiantou.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ background-size: 100px 70px;
+ }
+ .fault {
+ padding: 10px;
+ height: 60px;
+ font-size: 26px;
+ width: 100%;
+ text-align: right;
+ color: red;
+ }
+ .eqpName {
+ padding: 20px;
+
+ height: 160px;
+ }
+
+ .formula {
+ display: flex;
+ width: 340px;
+ height: 40px;
+ padding: 0 20px;
+ justify-content: space-around;
+ justify-items: center;
+ }
+
+ .formulaItem {
+ display: flex;
+ justify-content: center;
+ width: 85px;
+ height: 40px;
+ }
+
+ .eqpInfoText {
+ font-size: 18px;
+ font-weight: bold;
+ }
+
+ :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: 10px !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(216, 216, 216);
+
+ height: 20px;
+ width: 10px !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: 30px !important;
+ height: 30px !important;
+ bottom: -26px !important;
+ left: -6px;
+ border: none;
+ background: #ce0000;
+ }
+ :deep() .progress {
+ padding: 25px 25px;
+
+ width: 360px;
+ display: flex;
+ }
+ :deep() .ant-progress-bg {
+ height: 25px !important;
+ }
+ .outDiv {
+ display: flex;
+ justify-content: center;
+ justify-items: center;
+ }
+ .blingbling {
+ -webkit-animation: scaleout 1.5s infinite ease-in-out;
+ animation: scaleout 1.5s infinite ease-in-out;
+ }
+ .center {
+ display: flex;
+ justify-content: center;
+ justify-items: center;
+ align-items: center;
+ flex-wrap: wrap;
+ text-align: center;
+ }
+
+ .centerText {
+ width: 100%;
+ text-align: center;
+ }
+
+ @-webkit-keyframes scaleout {
+ 0% {
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ -webkit-transform: scale(1.1);
+ opacity: 0;
+ }
+ }
+
+ @keyframes scaleout {
+ 0% {
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(1.1);
+ -webkit-transform: scale(1.1);
+ opacity: 0;
+ }
+ }
+</style>
diff --git a/src/views/dry/bigScreen/BigEqp.vue b/src/views/dry/bigScreen/BigEqp.vue
new file mode 100644
index 0000000..d72d34e
--- /dev/null
+++ b/src/views/dry/bigScreen/BigEqp.vue
@@ -0,0 +1,2216 @@
+<template>
+ <dv-full-screen-container>
+ <div class="eqpBox">
+ <div class="eqpRow">
+ <div class="eqpImage" :style="{'background-position':position + 'px'}">
+
+ <div class="leftEqp">
+ <div style="width: 350px; ">
+ <div class="herbInfo">
+
+ <dv-border-box7 class="curEqp">
+ <div class="eqpName" style="padding: 30px" @click="changeEqp">
+ <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
+ <div class="subhead">{{ eqp?.type }}</div>
+ <dv-decoration-1 style="width:300px;height:90px; margin-left: 20px;" />
+ <!-- 璁惧锛歿{ eqp.name }}</div>
+ <div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> -->
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="curHerb" :style="{'background-image': 'url('+getHerbImageUrl(realData?.herbImage)+')'}">
+ <div class="eqpName" style="margin-left: 176px; height: 190px">
+ <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
+ <div class="subhead">骞茬嚗閰嶆柟</div>
+ </div>
+ <div class="formula">
+ <div class="formulaItem">
+ <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.feed }} 绛�</div>
+ <div class="subhead2">鎶曟枡閲�</div>
+ </div>
+ </div>
+ <div class="formulaItem">
+ <Icon style="color: red" icon="bx:wind" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.windTemp }} 掳C</div>
+ <div class="subhead2">鐑</div>
+ </div>
+ </div>
+ <div class="formulaItem">
+ <Icon style="color: green" icon="tabler:target-arrow" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.target }} %</div>
+ <div class="subhead2">鐩爣</div>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="eqpName">{{ realData?.herbName }}</div>
+ <div class="eqpName">{{ realData?.feed }} 绛�</div> -->
+ </dv-border-box7>
+ </div>
+ <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
+ <div class="chartTittle">椋庢満棰戠巼</div>
+ <div class="outDiv" style="padding-top: 10px">
+ <div id="fanFreq" style="width: 240px; height: 240px"></div>
+ </div>
+ </dv-border-box7> -->
+ <dv-border-box7 class="infoChart" style="margin-left: 0px;">
+ <div class="chartTittle">鍚按鐜�</div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 50%">
+ <div class="centerText">
+ <div class="mainInfo3"
+ ><span>{{ realData?.target }}</span
+ > %
+ </div>
+ <div class="subhead2">鐩爣鍚按鐜�</div>
+ </div>
+ </div>
+ <div class="center" style="height: 50%">
+ <div>
+ <div class="mainInfo3"
+ ><span>{{ realData?.initial }}</span
+ > %</div
+ >
+ <div class="subhead2">鏉ユ枡鍚按鐜�</div>
+ </div>
+ </div>
+ </div>
+ <div id="moisture" style="width: 170px; height: 170px"></div>
+ </div>
+ <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold;">瀹炴椂鍚按鐜�</div>
+ </dv-border-box7>
+ </div>
+ <dv-border-box7 class="leftTop">
+ <div class="leftTop0">
+ <div class="leftTop1">
+ <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+ <div>
+ <div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div>
+ <div class="subhead">鍓╀綑鏃堕棿</div>
+ </div>
+ </div>
+ <div class="leftTop1">
+ <Icon icon="bi:fan" :size="50" />
+ <div>
+ <div class="mainInfo">{{ realData.trendVo?.fanFrequency | 0 }} Hz</div>
+ <div class="subhead">椋庢満棰戠巼</div>
+ </div>
+ </div>
+ <div class="leftTop3" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"></div>
+ <div class="outDiv eqpStatus">
+ <div
+ style="
+ font-size: 28px;
+ margin-top: 190px;
+ color: white;
+ background-color: #1595ea;
+ height: 60px;
+ width: 180px;
+ line-height: 60px;
+ text-align: center;
+ border-radius: 5px;
+ font-weight: bold;
+ "
+ >
+ {{ statusTxt }}
+ </div>
+ <div v-if="realData?.isError"
+ class="eqpInfoText blingbling"
+ style="
+ position: absolute;
+ font-size: 30px;
+ max-height: 200px;
+ max-width: 720px;
+ border-radius: 10px;
+ background-color: #ce0000;
+ color: white;
+ padding: 10px;
+ "
+ >
+ <div class="outDiv">
+ <div><Icon icon="bx:error" :size="30" /> </div>
+ <div><span>{{realData?.errorMsg}}</span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px;">
+ <div class="chartTittle">椋庣娓╁害</div>
+ <div class="outDiv">
+ <div id="bellowsTemp" style="width: 230px; height: 230px">
+ <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="leftMid">
+ <div class="chartTittle">瀹炴椂杩涘害</div>
+ <div id="efficiencyLine" style="width: 848px; height: 180px;margin-top: -10px;"></div>
+ <div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between">
+ <div style="width: 100px; height: 20px">0 min</div>
+ <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
+ </div>
+ <div id="progressBar" style="width: 848px; height: 80px"></div>
+ </dv-border-box7>
+
+ <!-- <div class="outDiv">
+ <div style="height: 100px; width: 400px">
+ <Progress
+ :stroke-color="{
+ from: '#108ee9',
+ to: '#87d068',
+ }"
+ :percent="realData?.percent"
+ status="active"
+ :show-info="false"
+ />
+ <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
+ <span>骞茬嚗 52 Min</span>
+ <span>棰勮 120 Min</span>
+ </div>
+ </div>
+ </div> -->
+ </div>
+ <div class="rightInfo">
+ <div class="rightTop">
+
+ <dv-border-box7 class="tempMoisChart">
+ <div :id="'moisChart'" style="width: 690px; height: 420px"></div>
+ </dv-border-box7>
+ </div>
+ <div class="rightTwo">
+ <dv-border-box7 class="infoChart">
+ <div class="chartTittle">
+ 骞茬嚗鏁堢巼(kg/h)
+ <div class="rightLabel">
+ <div class="label good">>{{ standard.xiaolv }} 浼� </div>
+ <div class="label bad"><{{ standard.xlMin }} 宸�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 50%">
+ <div class="centerText">
+ <div class="mainInfo3"
+ ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span
+ > kg
+ </div>
+ <div class="subhead2">姘村垎钂稿彂</div>
+ </div>
+ </div>
+ <div class="center" style="height: 50%">
+ <div>
+ <div class="mainInfo3">{{ realData?.dryTime | 0 }} min</div>
+ <div class="subhead2">骞茬嚗鐢ㄦ椂</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{ standard.xiaolv }}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
+ </div>
+ <div style="line-height: 20px">
+ 棰濆畾
+ <br />
+ 鏁堢巼
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{ realData?.xiaolv | 0 }}</div>
+ <div class="barBack">
+ <div
+ class="barDiv"
+ :class="{ good: realData?.xlgood, bad: realData?.xlbad }"
+ :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]"
+ >
+ </div>
+ </div>
+ <div style="line-height: 20px">
+ 瀹炴椂
+ <br />
+ 鏁堢巼
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+
+
+
+
+ <dv-border-box7 class="infoChart">
+ <div class="chartTittle"
+ >钂告苯娑堣��(m鲁/kg)
+ <div class="rightLabel">
+ <div class="label bad">>{{ standard.zhengqi }} 宸�</div>
+ <div class="label good"><{{ standard.zqMin }} 浼�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 100%">
+ <div class="centerText">
+ <div class="mainInfo3"><span>{{realData?.steam}}</span> m鲁 </div>
+ <div class="subhead2">钂告苯鐢ㄩ噺</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{standard.zhengqi}}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
+ </div>
+ <div style="line-height: 20px">
+ 棰濆畾
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{realData?.zhengqi | 0 }}</div>
+ <div class="barBack">
+ <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
+ :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
+ </div>
+ <div style="line-height: 20px">
+ 瀹炴椂
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="infoChart" >
+ <div class="chartTittle">鏁堢巼瀵规瘮</div>
+ <div class="outDiv" style="padding-top: 10px">
+ <div id="compare" style="width: 300px; height: 250px"></div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="infoChart">
+ <div class="chartTittle">
+ <div> 鐢佃兘娑堣��(kWh/kg)</div>
+ <div class="rightLabel">
+ <div class="label bad">>{{ standard.dian }} 宸�</div>
+ <div class="label good"><{{ standard.dMin }} 浼�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 100%">
+ <div class="centerText">
+ <div class="mainInfo3"><span>{{realData?.watt}}</span> kWh </div>
+ <div class="subhead2">鐢佃兘鐢ㄩ噺</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{standard.dian}}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
+ </div>
+ <div style="line-height: 20px">
+ 棰濆畾
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{realData?.dian | 0}}</div>
+ <div class="barBack">
+ <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
+ :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
+ </div>
+ <div style="line-height: 20px">
+ 瀹炴椂
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</dv-full-screen-container>
+</template>
+
+<script setup lang="ts">
+ import { useFullscreen } from '@vueuse/core';
+ import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
+ import { router } from '/@/router'
+ import { onMounted, ref, onUnmounted } from 'vue'
+ import { Progress } from 'ant-design-vue'
+ import * as echarts from 'echarts'
+ import 'echarts-liquidfill'
+ import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
+ import { defHttp } from '/@/utils/http/axios'
+ import { queryById,listAll } from '../api/DryEquipment.api'
+ import { dryEquipment } from '../dataDefine/DryEquipment.data'
+ import { useUserStore } from '/@/store/modules/user'
+
+
+
+
+ const domRef = ref<Nullable<HTMLElement>>(null);
+ const { enter, toggle, exit, isFullscreen } = useFullscreen();
+
+const { toggle: toggleDom } = useFullscreen(domRef);
+ const Timer = ref()
+ const Timer2 = ref()
+ 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',
+ })
+ const eqps = ref([] as dryEquipment[])
+
+ const eqp = ref({} as dryEquipment)
+ const eqpNum = ref(1)
+ const userStore = useUserStore()
+ const realData = ref({})
+ const standard = ref({
+ xiaolv: 220,
+ xlMin: 200,
+ zhengqi: 50,
+ zqMin: 45,
+ dian: 8,
+ dMin: 7.5,
+ })
+
+ const position = ref(1)
+ //realData.value.tempValue = [0, 100]
+ realData.value.mois = [0.5, 0.35, 0.2]
+ statusGif = 'tmrefeng2'
+ realData.value.herbImage = 'yaocai1.png'
+ var moisChart: echarts.ECharts
+ var waterChart: echarts.ECharts
+
+ var bellowsTempChart: echarts.ECharts
+ // var fanFreqChart: echarts.ECharts
+ var progressBarChart: echarts.ECharts
+ var efficiencyLineChart: echarts.ECharts
+
+ var compareChart: echarts.ECharts
+
+ function initCharts() {
+ let domId = 'moisChart'
+ let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
+ let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
+ let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
+ // let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
+ let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
+ let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
+ // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
+ let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement
+ moisChart = echarts.init(chartDom)
+ waterChart = echarts.init(waterDom)
+ bellowsTempChart = echarts.init(bellowsTempDom)
+ // fanFreqChart = echarts.init(fanFreqDom)
+ progressBarChart = echarts.init(progressBarDom)
+ efficiencyLineChart = echarts.init(efficiencyLineDom)
+ compareChart = echarts.init(compaerDom)
+
+ const option = {
+ color: ['green', 'red'],
+ title: {
+ text: '鍚按鐜�/娓╁害瓒嬪娍',
+ textStyle: {
+ color: '#fff',
+ fontSize: 15
+ },
+
+ },
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ left: 50,
+ right: 70,
+ top: 50,
+ bottom: 60,
+ },
+ legend: {
+ right: 60,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ // toolbox: {
+ // show: true,
+ // feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none',
+ // },
+ // dataView: { readOnly: false },
+ // magicType: { type: ['line', 'bar'] },
+ // restore: {},
+ // saveAsImage: {},
+ // },
+ // },
+ xAxis: {
+ type: 'value',
+ axisLabel:{
+ color: '#fff'
+ },
+ //boundaryGap: false,
+ // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ min: 0,
+ max: function (value) {
+ if (value.max < 100) {
+ return 100
+ } else {
+ return value.max
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: ['#2b2b2b']
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: ['10%', '10%'],
+ axisLabel:{
+ color: '#fff'
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: ['#2b2b2b']
+ }
+ }
+ // min: 0,
+ // max: function (value) {
+ // if (value.max < 100) {
+ // return 100
+ // } else {
+ // return value.max
+ // }
+ // },
+ },
+ // yAxis: {
+ // type: 'value',
+ // axisLabel: {
+ // formatter: '{value} 掳C',
+ // },
+ // },
+ series: [
+ {
+ name: '鍚按鐜�',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ data: [
+ [1, 1],
+ [2, 2],
+ ],
+ lineStyle: {
+ width: 1,
+ },
+ markLine: {
+ data: [{ type: 'average', name: 'Avg' }],
+ },
+ areaStyle: {
+ opacity: 0.2,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(128, 255, 165)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(1, 191, 236)'
+ }
+ ])
+ },
+ },
+ {
+ name: '娓╁害',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ data: [
+ [1, 10],
+ [2, 20],
+ ],
+ lineStyle: {
+ width: 1,
+ },
+ areaStyle: {
+ opacity: 0.2,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(255, 0, 135)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(135, 0, 157)'
+ }
+ ])
+ },
+ // markLine: {
+ // data: [
+ // { type: 'average', name: 'Avg' },
+ // [
+ // {
+ // symbol: 'none',
+ // x: '90%',
+ // yAxis: 'max',
+ // },
+ // {
+ // symbol: 'circle',
+ // label: {
+ // position: 'start',
+ // formatter: 'Max',
+ // },
+ // type: 'max',
+ // name: '鏈�楂樼偣',
+ // },
+ // ],
+ // ],
+ // },
+ },
+ ],
+ }
+ const waterOption = {
+ series: [
+ {
+ type: 'liquidFill',
+ radius: '100%',
+ //waveAnimation: false,
+ amplitude: 3,
+ animationDuration: 5,
+ //animationDurationUpdate: 0,
+ data: [0.56,0.44,0.32],
+ 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: 20,
+ //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
+ },
+ },
+ ],
+ }
+
+ const bellowsOption = {
+ series: [
+ {
+ type: 'gauge',
+ center: ['50%', '60%'],
+ startAngle: 215,
+ endAngle: -35,
+ min: 0,
+ max: 80,
+ splitNumber: 8,
+ itemStyle: {
+ color: '#FFAB91',
+ },
+ progress: {
+ show: true,
+ width: 10,
+ },
+ pointer: {
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ width: 10,
+ },
+ },
+ axisTick: {
+ distance: -15,
+ splitNumber: 5,
+ length: 3,
+ lineStyle: {
+ width: 1,
+ color: '#999',
+ },
+ },
+ splitLine: {
+ distance: -18,
+ length: 6,
+ lineStyle: {
+ width: 2,
+ color: '#999',
+ },
+ },
+ axisLabel: {
+ distance: -13,
+ color: '#fff',
+ fontSize: 12,
+ },
+ anchor: {
+ show: false,
+ },
+ title: {
+ show: false,
+ },
+ detail: {
+ valueAnimation: true,
+ width: '60%',
+ lineHeight: 40,
+ borderRadius: 8,
+ offsetCenter: [0, '0%'],
+ fontSize: 20,
+ fontWeight: 'bolder',
+ formatter: '{value}掳C',
+ color: 'inherit',
+ },
+ data: [
+ {
+ value: 20,
+ },
+ ],
+ },
+ {
+ type: 'gauge',
+ center: ['50%', '60%'],
+ startAngle: 215,
+ endAngle: -35,
+ min: 0,
+ max: 80,
+ itemStyle: {
+ color: '#FD7347',
+ },
+ progress: {
+ show: true,
+ width: 3,
+ },
+ pointer: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ detail: {
+ show: false,
+ },
+ data: [
+ {
+ value: 20,
+ },
+ ],
+ },
+ ],
+ }
+
+ // const fanFreqOption = {
+ // series: [
+ // {
+ // type: 'gauge',
+ // progress: {
+ // show: true,
+ // width: 9,
+ // },
+ // axisLine: {
+ // lineStyle: {
+ // width: 9,
+ // },
+ // },
+ // axisTick: {
+ // show: false,
+ // },
+ // splitLine: {
+ // distance: 3,
+ // length: 4,
+ // lineStyle: {
+ // width: 1,
+ // color: '#999',
+ // },
+ // },
+ // axisLabel: {
+ // distance: 15,
+ // color: '#999',
+ // fontSize: 10,
+ // },
+ // anchor: {
+ // show: true,
+ // showAbove: true,
+ // size: 10,
+ // itemStyle: {
+ // borderWidth: 3,
+ // },
+ // },
+ // title: {
+ // show: false,
+ // },
+ // detail: {
+ // valueAnimation: true,
+ // fontSize: 20,
+ // offsetCenter: [0, '70%'],
+ // formatter: '{value}Hz',
+ // },
+ // data: [
+ // {
+ // value: 56,
+ // },
+ // ],
+ // },
+ // ],
+ // }
+ // const weightOption = {
+ // // title: {
+ // // text: 'Referer of a Website',
+ // // subtext: 'Fake Data',
+ // // left: 'center'
+ // // },
+ // color: ['#1595EA', '#2C4D90', '#FF7F7F'],
+ // tooltip: {
+ // trigger: 'item',
+ // },
+ // radius: [0, '85%'],
+ // // grid: {
+ // // top: 20,
+ // // left: 20,
+ // // right: 20,
+ // // bottom: 20,
+ // // },
+ // // legend: {
+ // // orient: 'vertical',
+ // // left: 'left',
+ // // },
+ // series: [
+ // {
+ // name: '閲嶉噺鏁版嵁',
+ // type: 'pie',
+ // radius: '50%',
+ // data: [
+ // { value: 1048, name: '鍓╀綑閲嶉噺' },
+ // { value: 735, name: '鐑樺幓閲嶉噺' },
+ // ],
+ // label: {
+ // show: false,
+ // },
+ // labelLine: {
+ // show: false,
+ // },
+ // emphasis: {
+ // itemStyle: {
+ // shadowBlur: 10,
+ // shadowOffsetX: 0,
+ // shadowColor: 'rgba(0, 0, 0, 0.5)',
+ // },
+ // },
+ // },
+ // ],
+ // }
+
+ const progressBarOption = {
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // // Use axis to trigger tooltip
+ // type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+ // },
+ // },
+ // color: [
+ // '#0653F6',
+ // // '#1B61E7',
+ // '#3673D5',
+ // // '#4A80C8',
+ // '#608FB8',
+ // // '#719BAD',
+ // '#82A6A1',
+ // // '#8DAD9A',
+ // '#9CB790',
+ // // '#A7BE88',
+ // '#B3C681',
+ // '#CAD671',
+ // '#DBE165',
+ // ],
+ animation: false, // 鍏抽棴鍔ㄧ敾
+ color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'],
+ grid: {
+ top: '12%',
+ left: '20',
+ right: '55',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ min: 0,
+ max: 150,
+ show: false,
+ type: 'value',
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ yAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'category',
+ data: ['鏃堕棿'],
+ },
+ series: [
+ // {
+ // name: '绗竴闃舵',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // barWidth: 26,
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [30],
+ // },
+ // {
+ // name: '绗簩闃舵',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [30],
+ // },
+ // {
+ // name: 'Affiliate Ad',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [20],
+ // },
+ // {
+ // name: 'Video Ad',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [15],
+ // },
+ // {
+ // name: 'Search Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [10],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [5],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [5],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [
+ // {
+ // value: 35,
+ // itemStyle: {
+ // color: '#c0c0c0',
+ // },
+ // },
+ // ],
+ // },
+ ],
+ }
+
+ const efficiencyLineOption = {
+ title: {},
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: '30%',
+ left: '17',
+ right: '57',
+ bottom: '0%',
+ containLabel: true,
+ },
+ legend: {
+ right: 60,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ xAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'value',
+ min: 0,
+ max: 150,
+ // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1],
+ },
+ yAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'value',
+ axisLabel: {
+ formatter: '{value} 掳C',
+ },
+ // max: standard.value.xiaolv + 3,
+ },
+ series: [
+ {
+ name: '骞茬嚗鏁堢巼',
+ type: 'line',
+ lineStyle: {
+ width: 1,
+ },
+ // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
+ data: [
+ [0, 1],
+ [15, 10],
+ [45, 11],
+ [70, 6],
+ ],
+ markPoint: {
+ data: [
+ { type: 'max', name: 'Max' },
+ { type: 'min', name: 'Min' },
+ ],
+ },
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '棰濆畾',
+ yAxis: standard.value.xiaolv,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}',
+ color: '#fff'
+ },
+ },
+ // markLine: {
+ // data: [{ type: 'average', name: 'Avg' }],
+ // },
+ },
+ ],
+ }
+
+ const compareOption = {
+
+ tooltip: {
+ trigger: 'axis',
+
+ },
+ grid: {
+ top: '6%',
+ left: '3%',
+ right: '10%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ show: false,
+ type: 'value',
+
+ },
+ yAxis: {
+ axisLine: {
+ show:false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'category',
+ data: ['1#', '2#', '3#', '4#', '5#', '6#']
+ },
+ series: [
+ {
+ name: '2011',
+ type: 'bar',
+ barWidth: 10,
+ data: [190, 89, 34, 70, 44, 30],
+ label: {
+ show: true,
+ position: 'right',
+ valueAnimation: true,
+
+ color: '#fff'
+ }
+ },
+ ]
+ }
+
+
+ option && moisChart.setOption(option)
+ waterOption && waterChart.setOption(waterOption)
+ bellowsOption && bellowsTempChart.setOption(bellowsOption)
+ // fanFreqOption && fanFreqChart.setOption(fanFreqOption)
+
+ progressBarOption && progressBarChart.setOption(progressBarOption)
+ efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
+ compareOption && compareChart.setOption(compareOption)
+ }
+
+ // 鍔ㄦ�佽鍙栧浘鐗�
+function getHerbImageUrl(name: string) {
+ return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href;
+}
+
+ // 鍔ㄦ�佽鍙栧浘鐗�
+ function getStatusImageUrl(name: string) {
+ return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href;
+}
+ function queryEqp() {
+ queryById({ id: router.currentRoute.value.params.id }).then((res) => {
+ // console.log(`output->res`, res)
+ eqp.value = res
+ queryRealTime()
+ setTimeout(initCharts, 500)
+ })
+ }
+
+ function listAllEqp() {
+ listAll({ enable: 'Y' })
+ .then((result) => {
+ //console.log(`output->result`, result)
+ eqps.value = result
+ // result.forEach((item) => {
+ // eqpCodes.push(item.code)
+ // })
+ queryRealTime()
+ setTimeout(initCharts, 500)
+
+ })
+ .catch((err) => {
+ //console.log(`output->err`, err)
+ })
+ }
+
+
+ var num = eqpNum.value;
+
+ function changeEqp() {
+ //console.log("changeEqp::",eqps.value.length);
+ num ++;
+ if (eqps.value.length > 0) {
+ var i = num%eqps.value.length
+ //eqp.value = eqps.value[i]
+ // console.log("777",i);
+ eqpNum.value = i;
+ //console.log("888",eqp.value);
+ queryRealTime()
+ //setTimeout(initCharts, 500)
+ }
+
+ }
+
+ // function queryEqpsReal() {
+
+ // if (eqps.value.length > 0) {
+ // var i = num%eqps.value.length
+ // eqp.value = eqps[i]
+ // console.log("777",i);
+ // console.log("888",eqp.value);
+ // queryRealTime()
+ // //setTimeout(initCharts, 500)
+ // }
+ // num ++;
+ // }
+
+ var shangliaoFlag = false;
+ var statusGif = 'tmrefeng2';
+ var statusTxt = '姝ｅ湪骞茬嚗'
+
+ function chaiwangban() {
+ statusGif = 'chaiwangban-1'
+ setTimeout(shangliao,7000)
+
+ }
+
+ function shangliao() {
+ statusGif = "shangliao-N"
+ setTimeout(()=>{
+ statusGif = "zhuangwangban"
+ setTimeout(()=>{
+ statusGif = "guanmen1"
+ setTimeout(()=>{
+ shangliaoFlag = false
+ },4000)
+
+ },7000)
+ },15000)
+ }
+
+
+ function queryRealTime() {
+
+ if (eqp.value) {
+ eqp.value = eqps.value[eqpNum.value]
+ // console.log("888",eqp.value);
+ let tenantId = 1003
+ let eqpCode = eqp.value.code
+ let queryRealTimeUrl = '/dry/real/getRealTimeData'
+ defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode} }).then((res) => {
+
+ if (res && res.trendVo) {
+ //console.log(`output->re11s`, res)
+ // 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),
+ ]
+ if (waterChart) {
+ waterChart.setOption({
+ series: [
+ {
+ data: res.mois,
+ label: {
+ formatter: function () {
+ return res.trendVo.moisture + '%'
+ },
+ fontSize: 20,
+ },
+ },
+ ],
+ })
+ }
+
+ /**娓╁害鐜舰鍥� */
+ if (bellowsTempChart) {
+ bellowsTempChart.setOption({
+ series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }],
+ })
+ }
+ /**椋庢満棰戠巼鐜舰鍥� */
+ // if (fanFreqChart) {
+ // fanFreqChart.setOption({
+ // series: [
+ // {
+ // data: [
+ // {
+ // value: res.trendVo.fanFrequency,
+ // },
+ // ],
+ // },
+ // ],
+ // })
+ // }
+ /**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */
+ if (res && res.detailList) {
+ var progressSeries = []
+ var ganZaoXiaoLv = []
+ var zhengQiXiaoHao = []
+ var dianNengXiaoHao = []
+ var totalTime = 0
+ var beforeWeight = 0
+ res.moisList = []
+ beforeWeight = res.originWeight
+ //console.log(`output->res`, res)
+ res.detailList.forEach((item) => {
+ //console.log(`output->bef`, beforeWeight)
+ //console.log(`output->cur`, item.weight)
+ res.moisList.push([item.totalTime, item.moisture])
+ //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
+ var curDryTime = item.totalTime - totalTime
+
+ if (curDryTime > 0) {
+ progressSeries.push({
+ name: item.moisture,
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [item.totalTime - totalTime],
+ })
+ ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])
+
+ totalTime = item.totalTime
+ }
+ beforeWeight = item.weight
+ })
+
+ if (res.remain) {
+ if (res.dryTime - totalTime > 0) {
+ progressSeries.push({
+ name: '褰撳墠',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [
+ {
+ value: res.dryTime - totalTime,
+ },
+ ],
+ })
+ }
+
+ // ganZaoXiaoLv.push([totalTime + res.remain,standard.value.xiaolv])
+
+ res.totalRemain = res.remain - (res.dryTime - totalTime)>0?res.remain - (res.dryTime - totalTime):0
+ progressSeries.push({
+ name: '鍓╀綑',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [
+ {
+ value: res.remain - (res.dryTime - totalTime),
+ itemStyle: {
+ color: '#c0c0c0',
+ },
+ },
+ ],
+ })
+
+
+
+ }
+
+ /**骞茬嚗杩涘害 */
+ if (progressBarChart) {
+ //console.log(`output->progressSeries`, progressSeries)
+ progressBarChart.setOption(
+ {
+ xAxis: {
+ max: totalTime + res.remain,
+ },
+ series: progressSeries,
+ },
+ { replaceMerge: ['series'] }
+ )
+ }
+
+ res.totalTime = totalTime + res.remain
+ /**骞茬嚗鏁堢巼銆佹秷鑰� */
+ if (efficiencyLineChart) {
+ //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
+ efficiencyLineChart.setOption({
+ xAxis: {
+ max: totalTime + res.remain,
+ },
+ series: [{ data: ganZaoXiaoLv,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '棰濆畾',
+ yAxis: standard.value.xiaolv,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}',
+ color: '#fff'
+ },
+ } },
+ { data: zhengQiXiaoHao },
+ { data: dianNengXiaoHao }],
+ })
+ }
+
+ res.moisList.push([res.dryTime, res.trendVo.moisture])
+ }
+
+ /**娓╁害瓒嬪娍 */
+ if (res && res.bellowsTemp) {
+ Array.from(Object.entries(res.bellowsTemp))
+ var arr = Object.keys(res.bellowsTemp)
+ var temArr = []
+ arr.forEach((item) => {
+ temArr.push([item * 1, res.bellowsTemp[item]])
+ })
+
+ //console.log(`output->arr` + JSON.stringify(temArr))
+ res.tempArr = temArr
+ }
+
+ /**骞茬嚗杩囩▼瓒嬪娍 */
+ if (moisChart) {
+ //console.log(`output->鏇存柊chart`)
+ moisChart.setOption({
+ series: [
+ {
+ data: res.moisList,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '鐩爣',
+ yAxis: res.target,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}%',
+ color: '#fff'
+ },
+ },
+ },
+ {
+ data: res.tempArr,
+ },
+ ],
+ })
+ }
+
+ /**鏁堢巼瀵规瘮鍥� */
+ if( (res.originWeight - res.yield) <= 0) {
+ res.xiaolv = standard.value.xiaolv + 6
+ } else {
+ res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
+ }
+
+ if (res.xiaolv > standard.value.xiaolv) {
+ res.xlgood = true
+ res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
+ res.xlrHeight = '100%'
+ } else if (res.xiaolv < standard.value.xlMin) {
+ res.xlbad = true
+ res.xlsHeight = '100%'
+ res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
+ } else {
+ res.xlsHeight = '100%'
+ res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
+ }
+
+
+
+ /** 钂告苯娑堣�� */
+ if( (res.originWeight - res.yield) <= 0) {
+ res.zhengqi = standard.value.zhengqi -3
+ } else {
+ res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
+ }
+ //console.log('zhengqi:', res.zhengqi);
+ if (res.zhengqi > standard.value.zhengqi) {
+ res.zqbad = true
+ res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%'
+ res.zqrHeight = '100%'
+ } else if (res.zhengqi < standard.value.zqMin) {
+ res.zqgood = true
+ res.zqsHeight = '100%'
+ res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
+ } else {
+ res.zqsHeight = '100%'
+ res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
+ }
+
+
+
+ /** 鐢佃兘娑堣�� */
+ if( (res.originWeight - res.yield) <= 0) {
+ res.dian = standard.value.dian -1.5
+ } else {
+ res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
+ }
+
+ if (res.dian > standard.value.dian) {
+ res.dnbad = true
+ res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
+ res.dnrHeight = '100%'
+ } else if (res.dian < standard.value.dMin) {
+
+ res.dngood = true
+ res.dnsHeight = '100%'
+ res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
+ } else {
+ res.dnsHeight = '100%'
+ res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
+ }
+
+ console.log("state:::fan::", res.state_fan,"roller::", res.state_roller,"windbox::", res.state_windbox);
+ console.log("===========================");
+ //console.log("state:::state_windbox::", res.state_windbox);
+
+ /**鐘舵��/gif鍔ㄥ浘 */
+ if (!shangliaoFlag) {
+ if (res.orderStatus == 0) {
+ statusGif = 'zanting'
+ statusTxt = '鍑嗗'
+ } else if (res.orderStatus == 1) {
+ shangliaoFlag = true
+ statusGif = 'kaimen1'
+ statusTxt = '涓婃枡'
+ setTimeout(chaiwangban,4000)
+ } else if (res.orderStatus == 2) {
+ if(res.state_fan == 1) {
+ statusGif = 'tmrefeng2'
+ statusTxt = '姝ｅ湪骞茬嚗'
+ }
+
+ if(res.state_roller == 4) {
+ statusGif = 'fanliao-N'
+ statusTxt = '姝ｅ湪缈绘枡'
+ }
+
+ if (res.state_roller == 5) {
+ statusGif = 'chuliao-N'
+ statusTxt = '姝ｅ湪鍑烘枡'
+ }
+
+ if (res.state_windbox == 2 || res.state_windbox == 3) {
+ statusGif = 'fengxiangsheng-1'
+ statusTxt = '姝ｅ湪骞茬嚗'
+ }
+ } else if(res.orderStatus == 3) {
+ statusGif = 'zanting'
+ statusTxt = '鏆傚仠'
+ } else if(res.orderStatus == 4) {
+ statusGif = 'zanting'
+ statusTxt = '骞茬嚗瀹屾垚'
+ }
+ }
+
+
+
+ if (compareChart) {
+ compareChart.setOption({
+ yAxis: {
+ data: res.compEqpNum
+ },
+ series: {
+ data: res.compEqpEffic
+ }
+ })
+ }
+
+ res.herbImage = 'yaocai1.png'
+
+ if (res.herbName == '鐧借姳铔囪垖鑽�') {
+ res.herbImage = 'baihuasheshecao.png'
+ } else if (res.herbName == '绯ョɑ鏍�') {
+ res.herbImage = 'nuodaogen.png'
+ } else if (res.herbName == '娣緤钘�') {
+ res.herbImage = 'yinyanghuo.png'
+ } else if (res.herbName == '椹娇鑻�') {
+ res.herbImage = 'machixian.png'
+ } else if (res.herbName == '澧ㄦ棻鑾�') {
+ res.herbImage = 'mohanlian.png'
+ } else if (res.herbName == '妗戠櫧鐨�') {
+ res.herbImage = 'sangbaipi.png'
+ }
+ res.isError = false
+
+ res.errorMsg = '鏈変竴涓晠闅滐紝璇锋鏌ャ��'
+ } else {
+ res = {
+ mois: [],
+ gif: 'tmrefeng2',
+ herbImage: 'yaocai1.png'
+ }
+ }
+
+ //console.log(`output->res`, res)
+ realData.value = res
+ })
+ }
+ }
+
+ var move = true;
+ function moveImage() {
+
+ if (move) {
+ position.value -= 0.3
+ } else {
+ position.value += 0.3
+ }
+ if(position.value < -240 ) {
+ move = false
+ }
+ if (position.value > -1) {
+ move = true
+ }
+
+
+ }
+
+ listAllEqp()
+ //queryEqp()
+ // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛�
+ onMounted(() => {
+ Timer.value = setInterval(queryRealTime, 3000)
+ Timer2.value = setInterval(moveImage, 50)
+ })
+
+ onUnmounted(() => {
+ clearInterval(Timer.value)
+ clearInterval(Timer2.value)
+ Timer.value = null
+ Timer2.value = null
+ })
+</script>
+
+<style scoped>
+ .eqpBox {
+ height: 100%;
+ }
+ .eqpRow {
+ }
+ .eqpImage {
+ height: 1080px;
+ width: 1920px;
+ background-image: url(/src/assets/images/dry/bg.png);
+ background-repeat: no-repeat;
+ color: white;
+ /*background-position: 160px 280px; */
+ /* background-color: red; */
+ background-size: 120%;
+ padding: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ }
+
+ .leftEqp {
+ height: 1080px;
+ width: 1200px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+
+ /* background-color: white;
+ background-image: url(/src/assets/images/dry/shebei1.png);
+ background-repeat: no-repeat;
+ background-size: 125%;
+ border-radius: 10px;
+ background-position: -119px 293px; */
+ }
+
+ .leftTop {
+ height: 750px;
+ width: 850px;
+ display: flex;
+ justify-content: center;
+ align-content: flex-start;
+ background-image: url(/src/assets/images/dry/ganzaoji-x.png);
+ background-repeat: no-repeat;
+ background-size: 79%;
+ border-radius: 10px;
+ flex-wrap: wrap;
+ background-position: 85px 279px;
+
+ }
+ .leftMid {
+
+ width: 850px;
+ height: 300px;
+ /* border: 1px solid; */
+ margin-top: 10px;
+ border-radius: 10px;
+ /* background: white; */
+ }
+ .mainInfo {
+ line-height: 33px;
+ padding-left: 10px;
+ font-size: 30px;
+ color: white;
+ }
+ .subhead {
+ color: #a19f9c;
+ font-size: 16px;
+ padding-left: 10px;
+ }
+
+ .mainInfo2 {
+ line-height: 20px;
+ padding-left: 0px;
+ font-size: 16px;
+ }
+ .subhead2 {
+ color: #a19f9c;
+ font-size: 10px;
+ padding-left: 0px;
+ }
+ .zhengqi {
+ height: 180px;
+ width: 200px;
+ background-image: url(/src/assets/images/dry/liuliangji.png);
+ background-repeat: no-repeat;
+ background-size: 160px;
+ /* border-radius: 10px; */
+ background-position: 17px -6px;
+ }
+
+ .liuliangji {
+ }
+ .leftData {
+ height: 250px;
+ width: 120px;
+ }
+ .rightChart {
+ height: 270px;
+ width: 170px;
+ margin-top: -30px;
+ }
+ .leftTop0 {
+ height: 600px;
+ width: 848px;
+ display: flex;
+ justify-content: center;
+ align-content: flex-start;
+ flex-wrap: wrap;
+ }
+ .leftTop1 {
+ width: 250px;
+ height: 200px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px;
+ color: #727272;
+
+ }
+ .leftTop2 {
+ width: 250px;
+ height: 200px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px;
+ color: #727272;
+ }
+ .leftTop3 {
+ width: 340px;
+ height: 200px;
+ /* background-image: url(/src/assets/images/dry/fanliao.gif); */
+ background-repeat: no-repeat;
+ background-position: 0px 20px;
+ background-size: 300px;
+ border-radius: 50px;
+ }
+
+ .eqpStatus {
+ width: 848px;
+ height: 300px;
+
+ padding: 100px;
+ }
+ .rightInfo {
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ height: 1060px;
+ width: 700px;
+ }
+
+ .rightTop {
+ display: flex;
+ height: 440px;
+ padding-left: 10px;
+ }
+ .rightTwo {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .infoChart {
+ width: 340px;
+ height: 300px;
+ /* background: white; */
+ margin-left: 10px;
+ margin-top: 10px;
+ border-radius: 10px;
+ }
+ .chartTittle {
+ width: 340px;
+ height: 30px;
+ font-size: 16px;
+ display: flex;
+ justify-content: space-between;
+ padding: 15px 15px;
+ }
+ .chartInfo {
+ width: 60px;
+ height: 180px;
+ }
+
+ .compareBar {
+ width: 55px;
+ height: 140px;
+ }
+ .margintop-30 {
+ margin-top: -30px;
+ }
+
+ .barTop {
+ width: 55px;
+ height: 30px;
+ }
+ .barBack {
+ width: 30px;
+ height: 100px;
+ /* border: 1px solid black; */
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-end;
+ }
+ .barDiv {
+ width: 100%;
+
+ background-color: #1595ea;
+ }
+ .bad {
+ background-color: #973535;
+ }
+ .rightLabel {
+ width: 110px;
+ display: flex;
+ justify-content: space-between;
+ }
+ .label {
+ color: white;
+ text-align: center;
+ width: 50px;
+ border-radius: 4px;
+ height: 20px;
+ font-size: 10px;
+ line-height: 21px;
+ }
+ .good {
+ background-color: #0d6e24;
+ }
+
+ .mainInfo3 {
+ font-size: 24px;
+ }
+ .herbInfo {
+ width: 340px;
+ height: 440px;
+ color: #727272;
+ }
+
+ .curEqp {
+ width: 340px;
+ height: 170px;
+ /* background: white;
+ border-radius: 10px; */
+ }
+ .curHerb {
+ margin-top: 10px;
+ width: 340px;
+ height: 260px;
+ /* background: white;
+ border-radius: 10px; */
+
+ background-repeat: no-repeat;
+ background-size: 200px;
+ background-position: 0px 10px;
+ }
+ .tempMoisChart {
+ width: 690px;
+ height: 440px;
+ /* background: white; */
+
+ padding: 20px;
+ border-radius: 10px;
+ }
+ .topLeft {
+ margin: 20px 40px 60px 20px;
+ padding: 15px;
+ /* background: white; */
+ border-radius: 10px;
+ height: 325px;
+ width: 440px;
+ /* background-image: url(/src/assets/images/dry/yaocai.jpg); */
+ background-repeat: no-repeat;
+ background-size: 164px 132px;
+ background-position: 239px 65px;
+ display: flex;
+ }
+ .topMid {
+ margin: 20px 20px 60px 40px;
+ /* background: white; */
+ border-radius: 10px;
+ background-image: url(/src/assets/images/dry/fanliao.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 20px;
+ background-size: 400px;
+ width: 400px;
+
+ padding: 20px;
+ }
+ .topRight {
+ margin: 20px 20px 60px 20px;
+ /* background: white; */
+ border-radius: 10px;
+ width: 700px;
+ padding: 20px;
+ }
+ .midLeft {
+ height: 450px;
+ width: 600px;
+ display: flex;
+ padding: 0 20px 20px 20px;
+ }
+ .midMid {
+ width: 500px;
+ padding-top: 50px;
+ }
+
+ .midRight {
+ background-image: url(/src/assets/images/dry/fengjixz.gif);
+ background-repeat: no-repeat;
+ background-position: 150px 260px;
+ background-size: 120px 120px;
+ width: 600px;
+ }
+
+ .shangJianTou {
+ margin-left: 140px;
+ width: 70px;
+ height: 100px;
+ background-image: url(/src/assets/images/dry/shangjiantoutou.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ background-size: 70px 100px;
+ }
+
+ .zoujiantou {
+ margin-left: 225px;
+ margin-top: 30px;
+ width: 100px;
+ height: 70px;
+ background-image: url(/src/assets/images/dry/zuojiantou.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ background-size: 100px 70px;
+ }
+ .fault {
+ padding: 10px;
+ height: 60px;
+ font-size: 26px;
+ width: 100%;
+ text-align: right;
+ color: red;
+ }
+ .eqpName {
+ padding: 20px;
+
+ height: 160px;
+ }
+
+ .formula {
+ display: flex;
+ width: 340px;
+ height: 40px;
+ padding: 0 20px;
+ justify-content: space-around;
+ justify-items: center;
+ }
+
+ .formulaItem {
+ display: flex;
+ justify-content: center;
+ width: 85px;
+ height: 40px;
+ }
+
+ .eqpInfoText {
+ font-size: 18px;
+ font-weight: bold;
+ }
+
+ :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: 10px !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(216, 216, 216);
+
+ height: 20px;
+ width: 10px !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: 30px !important;
+ height: 30px !important;
+ bottom: -26px !important;
+ left: -6px;
+ border: none;
+ background: #ce0000;
+ }
+ :deep() .progress {
+ padding: 25px 25px;
+
+ width: 360px;
+ display: flex;
+ }
+ :deep() .ant-progress-bg {
+ height: 25px !important;
+ }
+ .outDiv {
+ display: flex;
+ justify-content: center;
+ justify-items: center;
+ }
+ .blingbling {
+ -webkit-animation: scaleout 1.5s infinite ease-in-out;
+ animation: scaleout 1.5s infinite ease-in-out;
+ }
+ .center {
+ display: flex;
+ justify-content: center;
+ justify-items: center;
+ align-items: center;
+ flex-wrap: wrap;
+ text-align: center;
+ }
+
+ .centerText {
+ width: 100%;
+ text-align: center;
+ }
+
+ @-webkit-keyframes scaleout {
+ 0% {
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ -webkit-transform: scale(1.1);
+ opacity: 0;
+ }
+ }
+
+ @keyframes scaleout {
+ 0% {
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(1.1);
+ -webkit-transform: scale(1.1);
+ opacity: 0;
+ }
+ }
+</style>
diff --git a/src/views/dry/bigScreen/BigWorkShop.vue b/src/views/dry/bigScreen/BigWorkShop.vue
new file mode 100644
index 0000000..4370abf
--- /dev/null
+++ b/src/views/dry/bigScreen/BigWorkShop.vue
@@ -0,0 +1,14 @@
+<template>
+ <dv-full-screen-container>
+
+ </dv-full-screen-container>
+</template>
+
+<script setup lang="ts">
+
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dry/dataDefine/DryHerb.data.ts b/src/views/dry/dataDefine/DryHerb.data.ts
index 65bc579..a967ef6 100644
--- a/src/views/dry/dataDefine/DryHerb.data.ts
+++ b/src/views/dry/dataDefine/DryHerb.data.ts
@@ -28,51 +28,51 @@
dataIndex: 'parts',
},
- {
- title: '鍒濆鍚按鐜�',
- align: 'center',
- dataIndex: 'initial',
- },
+ // {
+ // title: '鍒濆鍚按鐜�',
+ // align: 'center',
+ // dataIndex: 'initial',
+ // },
{
title: '鐩爣鍚按鐜�',
align: 'center',
dataIndex: 'target',
},
- {
- title: '鎶曟枡閲忥紙绛愶級',
- align: 'center',
- dataIndex: 'feed',
- },
- {
- title: '棰勮骞茬嚗鏃堕棿',
- align: 'center',
- dataIndex: 'et',
- },
+ // {
+ // title: '鎶曟枡閲忥紙绛愶級',
+ // align: 'center',
+ // dataIndex: 'feed',
+ // },
+ // {
+ // title: '棰勮骞茬嚗鏃堕棿',
+ // align: 'center',
+ // dataIndex: 'et',
+ // },
{
title: '鐑娓╁害',
align: 'center',
dataIndex: 'windTemp',
},
- {
- title: '鐜娓╁害',
- align: 'center',
- dataIndex: 'envTemp',
- },
- {
- title: '鐜婀垮害',
- align: 'center',
- dataIndex: 'envHum',
- },
- {
- title: '鑽℃枡寤舵椂锛坢s锛�',
- align: 'center',
- dataIndex: 'delay',
- },
- {
- title: '缈绘枡娆℃暟',
- align: 'center',
- dataIndex: 'turn',
- },
+ // {
+ // title: '鐜娓╁害',
+ // align: 'center',
+ // dataIndex: 'envTemp',
+ // },
+ // {
+ // title: '鐜婀垮害',
+ // align: 'center',
+ // dataIndex: 'envHum',
+ // },
+ // {
+ // title: '鑽℃枡寤舵椂锛坢s锛�',
+ // align: 'center',
+ // dataIndex: 'delay',
+ // },
+ // {
+ // title: '缈绘枡娆℃暟',
+ // align: 'center',
+ // dataIndex: 'turn',
+ // },
{
title: '骞茬嚗鏂规硶',
align: 'center',
@@ -160,29 +160,29 @@
component: 'Input',
},
- {
- label: '鍒濆鍚按鐜�',
- field: 'initial',
- component: 'InputNumber',
- },
+ // {
+ // label: '鍒濆鍚按鐜�',
+ // field: 'initial',
+ // component: 'InputNumber',
+ // },
{
label: '鐩爣鍚按鐜�',
field: 'target',
component: 'InputNumber',
},
- {
- label: '鎶曟枡閲�',
- field: 'feed',
- component: 'InputNumber',
- },
- {
- label: '棰勮骞茬嚗鏃堕棿',
- field: 'et',
- component: 'InputNumber',
- dynamicRules: ({ model, schema }) => {
- return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
- },
- },
+ // {
+ // label: '鎶曟枡閲�',
+ // field: 'feed',
+ // component: 'InputNumber',
+ // },
+ // {
+ // label: '棰勮骞茬嚗鏃堕棿',
+ // field: 'et',
+ // component: 'InputNumber',
+ // dynamicRules: ({ model, schema }) => {
+ // return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
+ // },
+ // },
{
label: '鐑娓╁害',
field: 'windTemp',
@@ -191,38 +191,38 @@
return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
},
},
- {
- label: '鐜娓╁害',
- field: 'envTemp',
- component: 'InputNumber',
- dynamicRules: ({ model, schema }) => {
- return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
- },
- },
- {
- label: '鐜婀垮害',
- field: 'envHum',
- component: 'InputNumber',
- dynamicRules: ({ model, schema }) => {
- return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
- },
- },
- {
- label: '鑽℃枡寤舵椂',
- field: 'delay',
- component: 'InputNumber',
- dynamicRules: ({ model, schema }) => {
- return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
- },
- },
- {
- label: '缈绘枡娆℃暟',
- field: 'turn',
- component: 'InputNumber',
- dynamicRules: ({ model, schema }) => {
- return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
- },
- },
+ // {
+ // label: '鐜娓╁害',
+ // field: 'envTemp',
+ // component: 'InputNumber',
+ // dynamicRules: ({ model, schema }) => {
+ // return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
+ // },
+ // },
+ // {
+ // label: '鐜婀垮害',
+ // field: 'envHum',
+ // component: 'InputNumber',
+ // dynamicRules: ({ model, schema }) => {
+ // return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
+ // },
+ // },
+ // {
+ // label: '鑽℃枡寤舵椂',
+ // field: 'delay',
+ // component: 'InputNumber',
+ // dynamicRules: ({ model, schema }) => {
+ // return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
+ // },
+ // },
+ // {
+ // label: '缈绘枡娆℃暟',
+ // field: 'turn',
+ // component: 'InputNumber',
+ // dynamicRules: ({ model, schema }) => {
+ // return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '璇疯緭鍏ユ暟瀛�!' }]
+ // },
+ // },
{
label: '骞茬嚗鏂规硶',
field: 'dryMethod',
diff --git a/src/views/dry/monitor/Eqp.vue b/src/views/dry/monitor/Eqp.vue
index 688c6c9..ff09a46 100644
--- a/src/views/dry/monitor/Eqp.vue
+++ b/src/views/dry/monitor/Eqp.vue
@@ -1,120 +1,43 @@
<template>
- <div class="eqpBox">
+ <div class="eqpBox">
<div class="eqpRow">
- <div class="eqpImage">
+ <div class="eqpImage" >
+
<div class="leftEqp">
- <div class="leftTop">
- <div class="leftTop1">
- <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
- <div>
- <div class="mainInfo">{{ realData?.remain | 0 }}min</div>
- <div class="subhead">鍓╀綑鏃堕棿</div>
- </div>
- </div>
- <div class="leftTop1">
- <!-- <Icon icon="mdi:chart-finance" :size="50" />
- <div>
- <div class="mainInfo">98 %</div>
- <div class="subhead">骞茬嚗鏁堢巼</div>
- </div> -->
- </div>
- <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + realData?.gif + '.gif)' }"></div>
- <div class="outDiv eqpStatus">
- <div
- style="
- font-size: 28px;
- margin-top: 60px;
- color: white;
- background-color: #1595ea;
- height: 60px;
- width: 180px;
- line-height: 60px;
- text-align: center;
- border-radius: 5px;
- font-weight: bold;
- "
- >
- 姝ｅ湪骞茬嚗
- </div>
- <!-- <div
- class="eqpInfoText blingbling"
- style="
- position: absolute;
-
- max-height: 130px;
- max-width: 360px;
- border-radius: 10px;
- background-color: #ce0000;
- color: white;
- padding: 10px;
- "
- >
- <div class="outDiv">
- <div><Icon icon="bx:error" :size="30" /> </div>
- <div><span> 鏈変竴涓晠闅滐紝璇锋鏌ユ満鍣ㄣ��</span></div>
- </div>
- </div> -->
- </div>
- </div>
- <div class="leftMid">
- <div id="efficiencyLine" style="width: 780px; height: 150px"></div>
- <div style="height: 0px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
- <div style="width: 100px; height: 20px">0 min</div>
- <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
- </div>
- <div id="progressBar" style="width: 780px; height: 80px"></div>
- </div>
- <!-- <div class="outDiv">
- <div style="height: 100px; width: 400px">
- <Progress
- :stroke-color="{
- from: '#108ee9',
- to: '#87d068',
- }"
- :percent="realData?.percent"
- status="active"
- :show-info="false"
- />
- <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
- <span>骞茬嚗 52 Min</span>
- <span>棰勮 120 Min</span>
- </div>
- </div>
- </div> -->
- </div>
- <div class="rightInfo">
- <div class="rightTop">
- <div class="herbInfo">
- <div class="curEqp">
- <div class="eqpName">
- <div class="mainInfo" style="font-size: 26px">{{ eqp.name }}</div>
- <div class="subhead">{{ eqp.type }}</div>
+ <div style="width: 300px; ">
+ <div class="herbInfo">
+
+ <dv-border-box7 class="curEqp">
+ <div class="eqpName" @click="changeEqp">
+ <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
+ <div class="subhead">{{ eqp?.type }}</div>
+ <!-- <dv-decoration-1 style="width:150px;height:60px; margin-left: 20px;" /> -->
<!-- 璁惧锛歿{ eqp.name }}</div>
<div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> -->
</div>
- </div>
- <div class="curHerb">
+ </dv-border-box7>
+ <dv-border-box7 class="curHerb" :style="{'background-image': 'url(/src/assets/images/dry/yaocai/'+realData?.herbImage+')'}">
<div class="eqpName" style="margin-left: 100px">
<div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
<div class="subhead">骞茬嚗閰嶆柟</div>
</div>
<div class="formula">
<div class="formulaItem">
- <Icon icon="icon-park-twotone:box" :size="35" />
+ <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
<div>
<div class="mainInfo2">{{ realData?.feed }}绛�</div>
<div class="subhead2">鎶曟枡閲�</div>
</div>
</div>
<div class="formulaItem">
- <Icon icon="bx:wind" :size="35" />
+ <Icon style="color: red" icon="bx:wind" :size="35" />
<div>
<div class="mainInfo2">{{ realData?.windTemp }}掳C</div>
<div class="subhead2">鐑</div>
</div>
</div>
<div class="formulaItem">
- <Icon icon="tabler:target-arrow" :size="35" />
+ <Icon style="color: green" icon="tabler:target-arrow" :size="35" />
<div>
<div class="mainInfo2">{{ realData?.target }}%</div>
<div class="subhead2">鐩爣</div>
@@ -123,14 +46,15 @@
</div>
<!-- <div class="eqpName">{{ realData?.herbName }}</div>
<div class="eqpName">{{ realData?.feed }} 绛�</div> -->
+ </dv-border-box7>
+ </div>
+ <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
+ <div class="chartTittle">椋庢満棰戠巼</div>
+ <div class="outDiv" style="padding-top: 10px">
+ <div id="fanFreq" style="width: 220px; height: 200px"></div>
</div>
- </div>
- <div class="tempMoisChart">
- <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
- </div>
- </div>
- <div class="rightTwo">
- <div class="infoChart">
+ </dv-border-box7> -->
+ <dv-border-box7 class="infoChart" style="margin-left: 0px;">
<div class="chartTittle">鍚按鐜�</div>
<div class="outDiv" style="padding-top: 20px">
<div class="leftData">
@@ -156,25 +80,113 @@
<div id="moisture" style="width: 170px; height: 133px"></div>
</div>
<div class="subhead2" style="margin-top: -37px; padding-left: 172px">瀹炴椂鍚按鐜�</div>
+ </dv-border-box7>
+ </div>
+ <dv-border-box7 class="leftTop">
+
+ <div class="leftTop0">
+ <div class="leftTop1">
+ <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+ <div>
+ <div class="mainInfo">{{ realData?.totalRemain | 0 }}min</div>
+ <div class="subhead">鍓╀綑鏃堕棿</div>
+ </div>
</div>
- <div class="infoChart">
+ <div class="leftTop1">
+ <Icon icon="bi:fan" :size="50" />
+ <div>
+ <div class="mainInfo">{{ realData.trendVo?.fanFrequency | 0 }} Hz</div>
+ <div class="subhead">椋庢満棰戠巼</div>
+ </div>
+ </div>
+ <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + statusGif + '.gif)' }"></div>
+ <div class="outDiv eqpStatus">
+ <div
+ style="
+ font-size: 28px;
+ margin-top: 60px;
+ color: white;
+ background-color: #1595ea;
+ height: 60px;
+ width: 180px;
+ line-height: 60px;
+ text-align: center;
+ border-radius: 5px;
+ font-weight: bold;
+ "
+ >
+ {{ statusTxt }}
+ </div>
+ <div v-if="realData?.isError"
+ class="eqpInfoText blingbling"
+ style="
+ position: absolute;
+
+ max-height: 130px;
+ max-width: 360px;
+ border-radius: 10px;
+ background-color: #ce0000;
+ color: white;
+ padding: 10px;
+ "
+ >
+ <div class="outDiv">
+ <div><Icon icon="bx:error" :size="30" /> </div>
+ <div><span> {{realData?.errorMsg}}</span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </dv-border-box7>
+
+ <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px;">
<div class="chartTittle">椋庣娓╁害</div>
<div class="outDiv">
<div id="bellowsTemp" style="width: 220px; height: 200px">
<Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
</div>
</div>
+ </dv-border-box7>
+ <dv-border-box7 class="leftMid">
+ <div class="chartTittle">瀹炴椂杩涘害</div>
+ <div id="efficiencyLine" style="width: 780px; height: 130px; margin-top: -10px"></div>
+ <div style="height: 10px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
+ <div style="width: 100px; height: 20px">0 min</div>
+ <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
</div>
- <div class="infoChart">
- <div class="chartTittle">椋庢満棰戠巼</div>
- <div class="outDiv" style="padding-top: 10px">
- <div id="fanFreq" style="width: 220px; height: 200px"></div>
+ <div id="progressBar" style="width: 780px; height: 80px"></div>
+ </dv-border-box7>
+
+ <!-- <div class="outDiv">
+ <div style="height: 100px; width: 400px">
+ <Progress
+ :stroke-color="{
+ from: '#108ee9',
+ to: '#87d068',
+ }"
+ :percent="realData?.percent"
+ status="active"
+ :show-info="false"
+ />
+ <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
+ <span>骞茬嚗 52 Min</span>
+ <span>棰勮 120 Min</span>
</div>
</div>
- <div class="infoChart">
+ </div> -->
+ </div>
+ <div class="rightInfo">
+ <div class="rightTop">
+
+ <dv-border-box7 class="tempMoisChart">
+ <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
+ </dv-border-box7>
+ </div>
+ <div class="rightTwo">
+ <dv-border-box7 class="infoChart">
<div class="chartTittle">
骞茬嚗鏁堢巼(kg/h)
- <div style="width: 120px; display: flex; justify-content: space-between">
+ <div class="rightLabel">
<div class="label good">>{{ standard.xiaolv }} 浼� </div>
<div class="label bad"><{{ standard.xlMin }} 宸�</div>
</div>
@@ -227,11 +239,13 @@
</div>
</div>
</div>
- </div>
- <div class="infoChart">
+ </dv-border-box7>
+
+
+ <dv-border-box7 class="infoChart">
<div class="chartTittle"
>钂告苯娑堣��(m鲁/kg)
- <div style="width: 120px; display: flex; justify-content: space-between">
+ <div class="rightLabel">
<div class="label bad">>{{ standard.zhengqi }} 宸�</div>
<div class="label good"><{{ standard.zqMin }} 浼�</div>
</div>
@@ -240,16 +254,16 @@
<div class="leftData">
<div class="center" style="height: 100%">
<div class="centerText">
- <div class="mainInfo3"><span>45</span>m鲁 </div>
+ <div class="mainInfo3"><span>{{realData?.steam}}</span>m鲁 </div>
<div class="subhead2">钂告苯鐢ㄩ噺</div>
</div>
</div>
</div>
<div class="rightChart center">
<div class="center compareBar">
- <div class="barTop">25</div>
+ <div class="barTop">{{standard.zhengqi}}</div>
<div class="barBack">
- <div class="barDiv" id="zhengqiS"></div>
+ <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
</div>
<div style="line-height: 18px">
棰濆畾
@@ -258,9 +272,10 @@
</div>
</div>
<div class="center compareBar">
- <div class="barTop">26</div>
+ <div class="barTop">{{realData?.zhengqi | 0 }}</div>
<div class="barBack">
- <div class="barDiv" id="zhengqiR"> </div>
+ <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
+ :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
</div>
<div style="line-height: 18px">
瀹炴椂
@@ -270,10 +285,16 @@
</div>
</div>
</div>
- </div>
- <div class="infoChart">
+ </dv-border-box7>
+ <dv-border-box7 class="infoChart" >
+ <div class="chartTittle">鏁堢巼瀵规瘮</div>
+ <div class="outDiv" style="padding-top: 10px">
+ <div id="compare" style="width: 300px; height: 200px"></div>
+ </div>
+ </dv-border-box7>
+ <dv-border-box7 class="infoChart">
<div class="chartTittle">
- <div> 鐢佃兘娑堣�楋紙kw/h/kg锛� </div>
+ <div> 鐢佃兘娑堣��(kWh/kg)</div>
<div class="rightLabel">
<div class="label bad">>{{ standard.dian }} 宸�</div>
<div class="label good"><{{ standard.dMin }} 浼�</div>
@@ -283,16 +304,16 @@
<div class="leftData">
<div class="center" style="height: 100%">
<div class="centerText">
- <div class="mainInfo3"><span>45</span>kw/h </div>
+ <div class="mainInfo3"><span>{{realData?.watt}}</span>kWh </div>
<div class="subhead2">鐢佃兘鐢ㄩ噺</div>
</div>
</div>
</div>
<div class="rightChart center">
<div class="center compareBar">
- <div class="barTop">12</div>
+ <div class="barTop">{{standard.dian}}</div>
<div class="barBack">
- <div class="barDiv" id="dianS"></div>
+ <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
</div>
<div style="line-height: 18px">
棰濆畾
@@ -301,9 +322,10 @@
</div>
</div>
<div class="center compareBar">
- <div class="barTop">10</div>
+ <div class="barTop">{{realData?.dian | 0}}</div>
<div class="barBack">
- <div class="barDiv" id="dianR"></div>
+ <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
+ :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
</div>
<div style="line-height: 18px">
瀹炴椂
@@ -313,7 +335,7 @@
</div>
</div>
</div>
- </div>
+ </dv-border-box7>
</div>
</div>
</div>
@@ -322,6 +344,8 @@
</template>
<script setup lang="ts">
+ import { useFullscreen } from '@vueuse/core';
+ import { BorderBox13 as DvBorderBox7 } from '@kjgl77/datav-vue3'
import { router } from '/@/router'
import { onMounted, ref, onUnmounted } from 'vue'
import { Progress } from 'ant-design-vue'
@@ -332,6 +356,10 @@
import { queryById } from '../api/DryEquipment.api'
import { dryEquipment } from '../dataDefine/DryEquipment.data'
import { useUserStore } from '/@/store/modules/user'
+ const domRef = ref<Nullable<HTMLElement>>(null);
+ const { enter, toggle, exit, isFullscreen } = useFullscreen();
+
+const { toggle: toggleDom } = useFullscreen(domRef);
const Timer = ref()
const marks = ref<Record<number, any>>({
0: '0掳C',
@@ -436,6 +464,7 @@
99: '',
100: '100掳C',
})
+
const eqp = ref({} as dryEquipment)
const userStore = useUserStore()
const realData = ref({})
@@ -448,42 +477,51 @@
dMin: 7.5,
})
//realData.value.tempValue = [0, 100]
- realData.value.mois = [0, 0, 0]
+ realData.value.mois = [0.5, 0.35, 0.2]
+ realData.value.gif = 'tmrefeng2'
+ realData.value.herbImage = 'yaocai1.png'
var moisChart: echarts.ECharts
var waterChart: echarts.ECharts
var bellowsTempChart: echarts.ECharts
- var fanFreqChart: echarts.ECharts
+ // var fanFreqChart: echarts.ECharts
var progressBarChart: echarts.ECharts
var efficiencyLineChart: echarts.ECharts
+ var compareChart: echarts.ECharts
function initCharts() {
let domId = 'moisChart'
let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
- let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
+ // let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
+ let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement
// let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
moisChart = echarts.init(chartDom)
waterChart = echarts.init(waterDom)
bellowsTempChart = echarts.init(bellowsTempDom)
- fanFreqChart = echarts.init(fanFreqDom)
+ //fanFreqChart = echarts.init(fanFreqDom)
progressBarChart = echarts.init(progressBarDom)
efficiencyLineChart = echarts.init(efficiencyLineDom)
+ compareChart = echarts.init(compaerDom)
const option = {
- color: ['#2C4D90', '#CE0000'],
+ color: ['green', 'red'],
title: {
- text: '鍚按鐜囨俯搴﹁秼鍔�',
+ text: '鍚按鐜�/娓╁害瓒嬪娍',
+ textStyle: {
+ //color: '#fff',
+ fontSize: 15
+ },
},
tooltip: {
trigger: 'axis',
},
grid: {
left: 50,
- right: 50,
+ right: 70,
top: 50,
bottom: 40,
},
@@ -549,6 +587,19 @@
markLine: {
data: [{ type: 'average', name: 'Avg' }],
},
+ areaStyle: {
+ opacity: 0.2,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(128, 255, 165)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(1, 191, 236)'
+ }
+ ])
+ },
},
{
name: '娓╁害',
@@ -561,6 +612,19 @@
],
lineStyle: {
width: 1,
+ },
+ areaStyle: {
+ opacity: 0.2,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(255, 0, 135)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(135, 0, 157)'
+ }
+ ])
},
// markLine: {
// data: [
@@ -595,7 +659,7 @@
amplitude: 3,
animationDuration: 5,
//animationDurationUpdate: 0,
- data: realData.value.mois,
+ data: [0.56,0.44,0.32],
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: {
@@ -731,60 +795,60 @@
],
}
- const fanFreqOption = {
- series: [
- {
- type: 'gauge',
- progress: {
- show: true,
- width: 9,
- },
- axisLine: {
- lineStyle: {
- width: 9,
- },
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- distance: 3,
- length: 4,
- lineStyle: {
- width: 1,
- color: '#999',
- },
- },
- axisLabel: {
- distance: 15,
- color: '#999',
- fontSize: 10,
- },
- anchor: {
- show: true,
- showAbove: true,
- size: 10,
- itemStyle: {
- borderWidth: 3,
- },
- },
- title: {
- show: false,
- },
- detail: {
- valueAnimation: true,
- fontSize: 20,
- offsetCenter: [0, '70%'],
- formatter: '{value}Hz',
- },
- data: [
- {
- value: 56,
- },
- ],
- },
- ],
- }
+ // const fanFreqOption = {
+ // series: [
+ // {
+ // type: 'gauge',
+ // progress: {
+ // show: true,
+ // width: 9,
+ // },
+ // axisLine: {
+ // lineStyle: {
+ // width: 9,
+ // },
+ // },
+ // axisTick: {
+ // show: false,
+ // },
+ // splitLine: {
+ // distance: 3,
+ // length: 4,
+ // lineStyle: {
+ // width: 1,
+ // color: '#999',
+ // },
+ // },
+ // axisLabel: {
+ // distance: 15,
+ // color: '#999',
+ // fontSize: 10,
+ // },
+ // anchor: {
+ // show: true,
+ // showAbove: true,
+ // size: 10,
+ // itemStyle: {
+ // borderWidth: 3,
+ // },
+ // },
+ // title: {
+ // show: false,
+ // },
+ // detail: {
+ // valueAnimation: true,
+ // fontSize: 20,
+ // offsetCenter: [0, '70%'],
+ // formatter: '{value}Hz',
+ // },
+ // data: [
+ // {
+ // value: 56,
+ // },
+ // ],
+ // },
+ // ],
+ // }
// const weightOption = {
// // title: {
// // text: 'Referer of a Website',
@@ -1001,13 +1065,16 @@
trigger: 'axis',
},
grid: {
- top: '20%',
+ top: '30%',
left: '17',
right: '57',
bottom: '0%',
containLabel: true,
},
- legend: {},
+ legend: {
+ right: 60,
+
+ },
xAxis: {
show: false,
axisLine: {
@@ -1033,6 +1100,7 @@
axisLabel: {
formatter: '{value} 掳C',
},
+ max: standard.value.xiaolv + 3,
},
series: [
{
@@ -1054,6 +1122,19 @@
{ type: 'min', name: 'Min' },
],
},
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '棰濆畾',
+ yAxis: standard.value.xiaolv,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}',
+
+ },
+ },
// markLine: {
// data: [{ type: 'average', name: 'Avg' }],
// },
@@ -1061,14 +1142,62 @@
],
}
+ const compareOption = {
+
+ tooltip: {
+ trigger: 'axis',
+
+ },
+ grid: {
+ top: '6%',
+ left: '10%',
+ right: '10%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ show: false,
+ type: 'value',
+
+ },
+ yAxis: {
+ axisLine: {
+ show:false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'category',
+ data: ['1#', '2#', '3#', '4#', '5#', '6#']
+ },
+ series: [
+ {
+ name: '2011',
+ type: 'bar',
+ barWidth: 10,
+ data: [190, 89, 34, 70, 44, 30],
+ label: {
+ show: true,
+ position: 'right',
+ valueAnimation: true,
+
+ color: '#fff'
+ }
+ },
+ ]
+ }
+
+
option && moisChart.setOption(option)
waterOption && waterChart.setOption(waterOption)
bellowsOption && bellowsTempChart.setOption(bellowsOption)
- fanFreqOption && fanFreqChart.setOption(fanFreqOption)
+ //fanFreqOption && fanFreqChart.setOption(fanFreqOption)
progressBarOption && progressBarChart.setOption(progressBarOption)
efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
+ compareOption && compareChart.setOption(compareOption)
}
+
function queryEqp() {
queryById({ id: router.currentRoute.value.params.id }).then((res) => {
@@ -1079,13 +1208,39 @@
})
}
+
+ var shangliaoFlag = false;
+ var statusGif = 'tmrefeng2';
+ var statusTxt = '姝ｅ湪骞茬嚗'
+
+ function chaiwangban() {
+ statusGif = 'chaiwangban-1'
+ setTimeout(shangliao,7000)
+
+ }
+
+ function shangliao() {
+ statusGif = "shangliao-N"
+ setTimeout(()=>{
+ statusGif = "zhuangwangban"
+ setTimeout(()=>{
+ statusGif = "guanmen1"
+ setTimeout(()=>{
+ shangliaoFlag = false
+ },4000)
+
+ },5000)
+ },13000)
+ }
+
function queryRealTime() {
let tenantId = userStore.getTenant
let eqpCode = eqp.value.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) {
+ console.log(`output->re11s`, res)
// res.tempValue = [res.windTemp, 100]
//res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
/**姘存淮鍥惧惈姘撮噺 */
@@ -1117,19 +1272,19 @@
})
}
/**椋庢満棰戠巼鐜舰鍥� */
- if (fanFreqChart) {
- fanFreqChart.setOption({
- series: [
- {
- data: [
- {
- value: res.trendVo.fanFrequency,
- },
- ],
- },
- ],
- })
- }
+ // if (fanFreqChart) {
+ // fanFreqChart.setOption({
+ // series: [
+ // {
+ // data: [
+ // {
+ // value: res.trendVo.fanFrequency,
+ // },
+ // ],
+ // },
+ // ],
+ // })
+ // }
/**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */
if (res && res.detailList) {
var progressSeries = []
@@ -1140,12 +1295,14 @@
var beforeWeight = 0
res.moisList = []
+ beforeWeight = res.originWeight
res.detailList.forEach((item) => {
- console.log(`output->item`, item)
+ //console.log(`output->item`, item)
res.moisList.push([item.totalTime, item.moisture])
- console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
+ //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
var curDryTime = item.totalTime - totalTime
-
+ //console.log("curDryTime:", curDryTime)
+ //console.log("bw:",beforeWeight,"iw:", item.weight);
if (curDryTime > 0) {
progressSeries.push({
name: item.moisture,
@@ -1184,7 +1341,7 @@
],
})
}
-
+ res.totalRemain = res.remain - (res.dryTime - totalTime)>0?res.remain - (res.dryTime - totalTime):0
progressSeries.push({
name: '鍓╀綑',
type: 'bar',
@@ -1208,7 +1365,7 @@
/**骞茬嚗杩涘害 */
if (progressBarChart) {
- console.log(`output->progressSeries`, progressSeries)
+ //console.log(`output->progressSeries`, progressSeries)
progressBarChart.setOption(
{
xAxis: {
@@ -1223,12 +1380,39 @@
res.totalTime = totalTime + res.remain
/**骞茬嚗鏁堢巼銆佹秷鑰� */
if (efficiencyLineChart) {
- console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
+ //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
efficiencyLineChart.setOption({
xAxis: {
max: totalTime + res.remain,
},
- series: [{ data: ganZaoXiaoLv }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
+ yAxis: {
+ max: function (value) {
+
+ console.log("max::",value);
+ if (value.max < standard.value.xiaolv + 3) {
+ return standard.value.xiaolv + 3
+ } else {
+ return value.max
+ }
+ },
+
+
+
+ },
+ series: [{ data: ganZaoXiaoLv,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '棰濆畾',
+ yAxis: standard.value.xiaolv,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}',
+
+ },
+ } }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
})
}
@@ -1276,7 +1460,12 @@
}
/**鏁堢巼瀵规瘮鍥� */
- res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
+ if( (res.originWeight - res.yield) <= 0) {
+ res.xiaolv = standard.value.xiaolv + 6
+ } else {
+ res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
+ }
+
if (res.xiaolv > standard.value.xiaolv) {
res.xlgood = true
res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
@@ -1285,13 +1474,130 @@
res.xlbad = true
res.xlsHeight = '100%'
res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
+ } else {
+ res.xlsHeight = '100%'
+ res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
}
- /**gif鍔ㄥ浘 */
- res.gif = 'refeng2'
+
+
+ /** 钂告苯娑堣�� */
+ if( (res.originWeight - res.yield) <= 0) {
+ res.zhengqi = standard.value.zhengqi -3
+ } else {
+ res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
+ }
+ console.log('zhengqi:', res.zhengqi);
+ if (res.zhengqi > standard.value.zhengqi) {
+ res.zqbad = true
+ res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%'
+ res.zqrHeight = '100%'
+ } else if (res.zhengqi < standard.value.zqMin) {
+ res.zqgood = true
+ res.zqsHeight = '100%'
+ res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
+ } else {
+ res.zqsHeight = '100%'
+ res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
+ }
+
+
+
+ /** 鐢佃兘娑堣�� */
+ if( (res.originWeight - res.yield) <= 0) {
+ res.dian = standard.value.dian -1.5
+ } else {
+ res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
+ }
+
+ if (res.dian > standard.value.dian) {
+ res.dnbad = true
+ res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
+ res.dnrHeight = '100%'
+ } else if (res.dian < standard.value.dMin) {
+
+ res.dngood = true
+ res.dnsHeight = '100%'
+ res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
+ } else {
+ res.dnsHeight = '100%'
+ res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
+ }
+
+ /**鐘舵��/gif鍔ㄥ浘 */
+ if (!shangliaoFlag) {
+ if (res.orderStatus == 0) {
+ statusGif = 'zanting'
+ statusTxt = '鍑嗗'
+ } else if (res.orderStatus == 1) {
+ shangliaoFlag = true
+ statusGif = 'kaimen1'
+ statusTxt = '涓婃枡'
+ setTimeout(chaiwangban,4000)
+ } else if (res.orderStatus == 2) {
+ if(res.state_fan == 1) {
+ statusGif = 'tmrefeng2'
+ statusTxt = '姝ｅ湪骞茬嚗'
+ }
+
+ if(res.state_roller == 4) {
+ statusGif = 'fanliao-N'
+ statusTxt = '姝ｅ湪缈绘枡'
+ }
+
+ if (res.state_roller == 5) {
+ statusGif = 'chuliao-N'
+ statusTxt = '姝ｅ湪鍑烘枡'
+ }
+
+ if (res.state_windbox == 2 || res.state_windbox == 3) {
+ statusGif = 'fengxiangsheng-1'
+ statusTxt = '姝ｅ湪骞茬嚗'
+ }
+ } else if(res.orderStatus == 3) {
+ statusGif = 'zanting'
+ statusTxt = '鏆傚仠'
+ } else if(res.orderStatus == 4) {
+ statusGif = 'zanting'
+ statusTxt = '骞茬嚗瀹屾垚'
+ }
+ }
+
+
+ if (compareChart) {
+ compareChart.setOption({
+ yAxis: {
+ data: res.compEqpNum
+ },
+ series: {
+ data: res.compEqpEffic
+ }
+ })
+ }
+
+ res.herbImage = 'yaocai1.png'
+
+ if (res.herbName == '鐧借姳铔囪垖鑽�') {
+ res.herbImage = 'baihuasheshecao.png'
+ } else if (res.herbName == '绯ョɑ鏍�') {
+ res.herbImage = 'nuodaogen.png'
+ } else if (res.herbName == '娣緤钘�') {
+ res.herbImage = 'yinyanghuo.png'
+ } else if (res.herbName == '椹娇鑻�') {
+ res.herbImage = 'machixian.png'
+ } else if (res.herbName == '澧ㄦ棻鑾�') {
+ res.herbImage = 'mohanlian.png'
+ } else if (res.herbName == '妗戠櫧鐨�') {
+ res.herbImage = 'sangbaipi.png'
+ }
+ res.isError = false
+
+ res.errorMsg = '鏈変竴涓晠闅滐紝璇锋鏌ャ��'
} else {
res = {
mois: [],
+ gif: 'tmrefeng2',
+ herbImage: 'yaocai1.png'
}
}
console.log(`output->res`, res)
@@ -1316,14 +1622,15 @@
height: 100%;
}
.eqpRow {
+ background: white;
}
.eqpImage {
height: 860px;
width: 1800px;
- background-image: url(/src/assets/images/dry/ganzaoji-x.png);
- background-repeat: no-repeat;
+ /* background-image: url(/src/assets/images/dry/bg.png);
+ background-repeat: no-repeat; */
- background-position: 160px 280px;
+ /*background-position: 160px 280px; */
/* background-color: red; */
padding: 10px;
display: flex;
@@ -1333,7 +1640,10 @@
.leftEqp {
height: 840px;
- width: 780px;
+ width: 1080px;
+ display: flex;
+ flex-wrap: wrap;
+
/* background-color: white;
background-image: url(/src/assets/images/dry/shebei1.png);
background-repeat: no-repeat;
@@ -1344,25 +1654,35 @@
.leftTop {
height: 600px;
+ width: 780px;
display: flex;
justify-content: center;
align-content: flex-start;
- background-color: white;
+ /* background-color: white; */
background-image: url(/src/assets/images/dry/shebei1.png);
background-repeat: no-repeat;
background-size: 110%;
border-radius: 10px;
flex-wrap: wrap;
background-position: -78px 119px;
+
+ }
+ .leftTop0 {
+ height: 600px;
+ width: 780px;
+ display: flex;
+ justify-content: center;
+ align-content: flex-start;
+ flex-wrap: wrap;
}
.leftMid {
- padding-top: 10px;
+
width: 780px;
height: 230px;
/* border: 1px solid; */
margin-top: 10px;
border-radius: 10px;
- background: white;
+ /* background: white; */
}
.mainInfo {
line-height: 33px;
@@ -1415,6 +1735,7 @@
align-items: center;
font-size: 30px;
color: #727272;
+
}
.leftTop2 {
width: 250px;
@@ -1447,7 +1768,7 @@
flex-wrap: wrap;
align-content: flex-start;
height: 850px;
- width: 900px;
+ width: 600px;
}
.rightTop {
@@ -1463,7 +1784,7 @@
.infoChart {
width: 290px;
height: 230px;
- background: white;
+ /* background: white; */
margin-left: 10px;
margin-top: 10px;
border-radius: 10px;
@@ -1507,14 +1828,15 @@
background-color: #1595ea;
}
.bad {
- background-color: #fdcb6e;
+ background-color: #ed6f6f;
}
.rightLabel {
- width: 120px;
+ width: 110px;
display: flex;
justify-content: space-between;
}
.label {
+ color: white;
text-align: center;
width: 50px;
border-radius: 4px;
@@ -1523,7 +1845,7 @@
line-height: 21px;
}
.good {
- background-color: #75f94d;
+ background-color: #2ecf54;
}
.mainInfo3 {
@@ -1538,15 +1860,15 @@
.curEqp {
width: 290px;
height: 120px;
- background: white;
- border-radius: 10px;
+ /* background: white;
+ border-radius: 10px; */
}
.curHerb {
margin-top: 10px;
width: 290px;
height: 230px;
- background: white;
- border-radius: 10px;
+ /* background: white;
+ border-radius: 10px; */
background-image: url(/src/assets/images/dry/yaocai.jpg);
background-repeat: no-repeat;
background-size: 110px 90px;
@@ -1555,15 +1877,15 @@
.tempMoisChart {
width: 590px;
height: 360px;
- background: white;
- margin-left: 10px;
+ /* background: white; */
+
padding: 20px;
border-radius: 10px;
}
.topLeft {
margin: 20px 40px 60px 20px;
padding: 15px;
- background: white;
+ /* background: white; */
border-radius: 10px;
height: 325px;
width: 440px;
@@ -1575,7 +1897,7 @@
}
.topMid {
margin: 20px 20px 60px 40px;
- background: white;
+ /* background: white; */
border-radius: 10px;
background-image: url(/src/assets/images/dry/fanliao.gif);
background-repeat: no-repeat;
@@ -1587,7 +1909,7 @@
}
.topRight {
margin: 20px 20px 60px 20px;
- background: white;
+ /* background: white; */
border-radius: 10px;
width: 700px;
padding: 20px;
@@ -1656,6 +1978,7 @@
.formulaItem {
display: flex;
+ justify-content: center;
width: 85px;
height: 40px;
}
diff --git a/src/views/dry/monitor/Eqp copy 2.vue b/src/views/dry/monitor/Eqp1.vue
similarity index 100%
rename from src/views/dry/monitor/Eqp copy 2.vue
rename to src/views/dry/monitor/Eqp1.vue
diff --git a/src/views/dry/monitor/Eqp2.vue b/src/views/dry/monitor/Eqp2.vue
new file mode 100644
index 0000000..cf94fde
--- /dev/null
+++ b/src/views/dry/monitor/Eqp2.vue
@@ -0,0 +1,1788 @@
+<template>
+ <div class="eqpBox">
+ <div class="eqpRow">
+ <div class="eqpImage">
+ <div class="leftEqp">
+ <div class="leftTop">
+ <div class="leftTop1">
+ <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+ <div>
+ <div class="mainInfo">{{ realData?.remain | 0 }}min</div>
+ <div class="subhead">鍓╀綑鏃堕棿</div>
+ </div>
+ </div>
+ <div class="leftTop1">
+ <!-- <Icon icon="mdi:chart-finance" :size="50" />
+ <div>
+ <div class="mainInfo">98 %</div>
+ <div class="subhead">骞茬嚗鏁堢巼</div>
+ </div> -->
+ </div>
+ <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + realData?.gif + '.gif)' }"></div>
+ <div class="outDiv eqpStatus">
+ <div
+ style="
+ font-size: 28px;
+ margin-top: 60px;
+ color: white;
+ background-color: #1595ea;
+ height: 60px;
+ width: 180px;
+ line-height: 60px;
+ text-align: center;
+ border-radius: 5px;
+ font-weight: bold;
+ "
+ >
+ 姝ｅ湪骞茬嚗
+ </div>
+ <!-- <div
+ class="eqpInfoText blingbling"
+ style="
+ position: absolute;
+
+ max-height: 130px;
+ max-width: 360px;
+ border-radius: 10px;
+ background-color: #ce0000;
+ color: white;
+ padding: 10px;
+ "
+ >
+ <div class="outDiv">
+ <div><Icon icon="bx:error" :size="30" /> </div>
+ <div><span> 鏈変竴涓晠闅滐紝璇锋鏌ユ満鍣ㄣ��</span></div>
+ </div>
+ </div> -->
+ </div>
+ </div>
+ <div class="leftMid">
+ <div id="efficiencyLine" style="width: 780px; height: 150px"></div>
+ <div style="height: 0px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
+ <div style="width: 100px; height: 20px">0 min</div>
+ <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
+ </div>
+ <div id="progressBar" style="width: 780px; height: 80px"></div>
+ </div>
+ <!-- <div class="outDiv">
+ <div style="height: 100px; width: 400px">
+ <Progress
+ :stroke-color="{
+ from: '#108ee9',
+ to: '#87d068',
+ }"
+ :percent="realData?.percent"
+ status="active"
+ :show-info="false"
+ />
+ <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
+ <span>骞茬嚗 52 Min</span>
+ <span>棰勮 120 Min</span>
+ </div>
+ </div>
+ </div> -->
+ </div>
+ <div class="rightInfo">
+ <div class="rightTop">
+ <div class="herbInfo">
+ <div class="curEqp">
+ <div class="eqpName">
+ <div class="mainInfo" style="font-size: 26px">{{ eqp.name }}</div>
+ <div class="subhead">{{ eqp.type }}</div>
+ <!-- 璁惧锛歿{ eqp.name }}</div>
+ <div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> -->
+ </div>
+ </div>
+ <div class="curHerb">
+ <div class="eqpName" style="margin-left: 100px">
+ <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
+ <div class="subhead">骞茬嚗閰嶆柟</div>
+ </div>
+ <div class="formula">
+ <div class="formulaItem">
+ <Icon icon="icon-park-twotone:box" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.feed }}绛�</div>
+ <div class="subhead2">鎶曟枡閲�</div>
+ </div>
+ </div>
+ <div class="formulaItem">
+ <Icon icon="bx:wind" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.windTemp }}掳C</div>
+ <div class="subhead2">鐑</div>
+ </div>
+ </div>
+ <div class="formulaItem">
+ <Icon icon="tabler:target-arrow" :size="35" />
+ <div>
+ <div class="mainInfo2">{{ realData?.target }}%</div>
+ <div class="subhead2">鐩爣</div>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="eqpName">{{ realData?.herbName }}</div>
+ <div class="eqpName">{{ realData?.feed }} 绛�</div> -->
+ </div>
+ </div>
+ <div class="tempMoisChart">
+ <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
+ </div>
+ </div>
+ <div class="rightTwo">
+ <div class="infoChart">
+ <div class="chartTittle">鍚按鐜�</div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 50%">
+ <div class="centerText">
+ <div class="mainInfo3"
+ ><span>{{ realData?.target }}</span
+ >%
+ </div>
+ <div class="subhead2">鐩爣鍚按鐜�</div>
+ </div>
+ </div>
+ <div class="center" style="height: 50%">
+ <div>
+ <div class="mainInfo3"
+ ><span>{{ realData?.initial }}</span
+ >%</div
+ >
+ <div class="subhead2">鏉ユ枡鍚按鐜�</div>
+ </div>
+ </div>
+ </div>
+ <div id="moisture" style="width: 170px; height: 133px"></div>
+ </div>
+ <div class="subhead2" style="margin-top: -37px; padding-left: 172px">瀹炴椂鍚按鐜�</div>
+ </div>
+ <div class="infoChart">
+ <div class="chartTittle">椋庣娓╁害</div>
+ <div class="outDiv">
+ <div id="bellowsTemp" style="width: 220px; height: 200px">
+ <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+ </div>
+ </div>
+ </div>
+ <div class="infoChart">
+ <div class="chartTittle">椋庢満棰戠巼</div>
+ <div class="outDiv" style="padding-top: 10px">
+ <div id="fanFreq" style="width: 220px; height: 200px"></div>
+ </div>
+ </div>
+ <div class="infoChart">
+ <div class="chartTittle">
+ 骞茬嚗鏁堢巼(kg/h)
+ <div class="rightLabel">
+ <div class="label good">>{{ standard.xiaolv }} 浼� </div>
+ <div class="label bad"><{{ standard.xlMin }} 宸�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 50%">
+ <div class="centerText">
+ <div class="mainInfo3"
+ ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span
+ >kg
+ </div>
+ <div class="subhead2">姘村垎钂稿彂</div>
+ </div>
+ </div>
+ <div class="center" style="height: 50%">
+ <div>
+ <div class="mainInfo3">{{ realData?.dryTime | 0 }}min</div>
+ <div class="subhead2">骞茬嚗鐢ㄦ椂</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{ standard.xiaolv }}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
+ </div>
+ <div style="line-height: 18px">
+ 棰濆畾
+ <br />
+ 鏁堢巼
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{ realData?.xiaolv | 0 }}</div>
+ <div class="barBack">
+ <div
+ class="barDiv"
+ :class="{ good: realData?.xlgood, bad: realData?.xlbad }"
+ :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]"
+ >
+ </div>
+ </div>
+ <div style="line-height: 18px">
+ 瀹炴椂
+ <br />
+ 鏁堢巼
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="infoChart">
+ <div class="chartTittle"
+ >钂告苯娑堣��(m鲁/kg)
+ <div class="rightLabel">
+ <div class="label bad">>{{ standard.zhengqi }} 宸�</div>
+ <div class="label good"><{{ standard.zqMin }} 浼�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 100%">
+ <div class="centerText">
+ <div class="mainInfo3"><span>{{realData?.steam}}</span>m鲁 </div>
+ <div class="subhead2">钂告苯鐢ㄩ噺</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{standard.zhengqi}}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
+ </div>
+ <div style="line-height: 18px">
+ 棰濆畾
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{realData?.zhengqi | 0 }}</div>
+ <div class="barBack">
+ <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
+ :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
+ </div>
+ <div style="line-height: 18px">
+ 瀹炴椂
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="infoChart">
+ <div class="chartTittle">
+ <div> 鐢佃兘娑堣��(kw/h/kg)</div>
+ <div class="rightLabel">
+ <div class="label bad">>{{ standard.dian }} 宸�</div>
+ <div class="label good"><{{ standard.dMin }} 浼�</div>
+ </div>
+ </div>
+ <div class="outDiv" style="padding-top: 20px">
+ <div class="leftData">
+ <div class="center" style="height: 100%">
+ <div class="centerText">
+ <div class="mainInfo3"><span>{{realData?.watt}}</span>kw/h </div>
+ <div class="subhead2">鐢佃兘鐢ㄩ噺</div>
+ </div>
+ </div>
+ </div>
+ <div class="rightChart center">
+ <div class="center compareBar">
+ <div class="barTop">{{standard.dian}}</div>
+ <div class="barBack">
+ <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
+ </div>
+ <div style="line-height: 18px">
+ 棰濆畾
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ <div class="center compareBar">
+ <div class="barTop">{{realData?.dian | 0}}</div>
+ <div class="barBack">
+ <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
+ :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
+ </div>
+ <div style="line-height: 18px">
+ 瀹炴椂
+ <br />
+ 娑堣��
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+ import { router } from '/@/router'
+ import { onMounted, ref, onUnmounted } from 'vue'
+ import { Progress } from 'ant-design-vue'
+ import * as echarts from 'echarts'
+ import 'echarts-liquidfill'
+ import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
+ import { defHttp } from '/@/utils/http/axios'
+ import { queryById } from '../api/DryEquipment.api'
+ import { dryEquipment } from '../dataDefine/DryEquipment.data'
+ import { useUserStore } from '/@/store/modules/user'
+ const Timer = ref()
+ 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',
+ })
+ const eqp = ref({} as dryEquipment)
+ const userStore = useUserStore()
+ const realData = ref({})
+ const standard = ref({
+ xiaolv: 220,
+ xlMin: 200,
+ zhengqi: 50,
+ zqMin: 45,
+ dian: 8,
+ dMin: 7.5,
+ })
+ //realData.value.tempValue = [0, 100]
+ realData.value.mois = [0.5, 0.35, 0.2]
+ var moisChart: echarts.ECharts
+ var waterChart: echarts.ECharts
+
+ var bellowsTempChart: echarts.ECharts
+ var fanFreqChart: echarts.ECharts
+ var progressBarChart: echarts.ECharts
+ var efficiencyLineChart: echarts.ECharts
+
+ function initCharts() {
+ let domId = 'moisChart'
+ let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
+ let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
+ let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
+ let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
+ let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
+ let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
+ // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
+ moisChart = echarts.init(chartDom)
+ waterChart = echarts.init(waterDom)
+ bellowsTempChart = echarts.init(bellowsTempDom)
+ fanFreqChart = echarts.init(fanFreqDom)
+ progressBarChart = echarts.init(progressBarDom)
+ efficiencyLineChart = echarts.init(efficiencyLineDom)
+
+ const option = {
+ color: ['#2C4D90', '#CE0000'],
+ title: {
+ text: '鍚按鐜囨俯搴﹁秼鍔�',
+ },
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ left: 50,
+ right: 50,
+ top: 50,
+ bottom: 40,
+ },
+ legend: {
+ right: 20,
+ },
+ // toolbox: {
+ // show: true,
+ // feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none',
+ // },
+ // dataView: { readOnly: false },
+ // magicType: { type: ['line', 'bar'] },
+ // restore: {},
+ // saveAsImage: {},
+ // },
+ // },
+ xAxis: {
+ type: 'value',
+ //boundaryGap: false,
+ // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ min: 0,
+ max: function (value) {
+ if (value.max < 100) {
+ return 100
+ } else {
+ return value.max
+ }
+ },
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: ['10%', '10%'],
+ // min: 0,
+ // max: function (value) {
+ // if (value.max < 100) {
+ // return 100
+ // } else {
+ // return value.max
+ // }
+ // },
+ },
+ // yAxis: {
+ // type: 'value',
+ // axisLabel: {
+ // formatter: '{value} 掳C',
+ // },
+ // },
+ series: [
+ {
+ name: '鍚按鐜�',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ data: [
+ [1, 1],
+ [2, 2],
+ ],
+ lineStyle: {
+ width: 1,
+ },
+ markLine: {
+ data: [{ type: 'average', name: 'Avg' }],
+ },
+ },
+ {
+ name: '娓╁害',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ data: [
+ [1, 10],
+ [2, 20],
+ ],
+ lineStyle: {
+ width: 1,
+ },
+ // markLine: {
+ // data: [
+ // { type: 'average', name: 'Avg' },
+ // [
+ // {
+ // symbol: 'none',
+ // x: '90%',
+ // yAxis: 'max',
+ // },
+ // {
+ // symbol: 'circle',
+ // label: {
+ // position: 'start',
+ // formatter: 'Max',
+ // },
+ // type: 'max',
+ // name: '鏈�楂樼偣',
+ // },
+ // ],
+ // ],
+ // },
+ },
+ ],
+ }
+ const waterOption = {
+ series: [
+ {
+ type: 'liquidFill',
+ radius: '100%',
+ //waveAnimation: false,
+ amplitude: 3,
+ animationDuration: 5,
+ //animationDurationUpdate: 0,
+ data: [0.56,0.44,0.32],
+ 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: 20,
+ //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
+ },
+ },
+ ],
+ }
+
+ const bellowsOption = {
+ series: [
+ {
+ type: 'gauge',
+ center: ['50%', '60%'],
+ startAngle: 215,
+ endAngle: -35,
+ min: 0,
+ max: 80,
+ splitNumber: 8,
+ itemStyle: {
+ color: '#FFAB91',
+ },
+ progress: {
+ show: true,
+ width: 10,
+ },
+ pointer: {
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ width: 10,
+ },
+ },
+ axisTick: {
+ distance: -15,
+ splitNumber: 5,
+ length: 3,
+ lineStyle: {
+ width: 1,
+ color: '#999',
+ },
+ },
+ splitLine: {
+ distance: -18,
+ length: 6,
+ lineStyle: {
+ width: 2,
+ color: '#999',
+ },
+ },
+ axisLabel: {
+ distance: -13,
+ color: '#999',
+ fontSize: 9,
+ },
+ anchor: {
+ show: false,
+ },
+ title: {
+ show: false,
+ },
+ detail: {
+ valueAnimation: true,
+ width: '60%',
+ lineHeight: 40,
+ borderRadius: 8,
+ offsetCenter: [0, '0%'],
+ fontSize: 20,
+ fontWeight: 'bolder',
+ formatter: '{value}掳C',
+ color: 'inherit',
+ },
+ data: [
+ {
+ value: 20,
+ },
+ ],
+ },
+ {
+ type: 'gauge',
+ center: ['50%', '60%'],
+ startAngle: 215,
+ endAngle: -35,
+ min: 0,
+ max: 80,
+ itemStyle: {
+ color: '#FD7347',
+ },
+ progress: {
+ show: true,
+ width: 3,
+ },
+ pointer: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ detail: {
+ show: false,
+ },
+ data: [
+ {
+ value: 20,
+ },
+ ],
+ },
+ ],
+ }
+
+ const fanFreqOption = {
+ series: [
+ {
+ type: 'gauge',
+ progress: {
+ show: true,
+ width: 9,
+ },
+ axisLine: {
+ lineStyle: {
+ width: 9,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ distance: 3,
+ length: 4,
+ lineStyle: {
+ width: 1,
+ color: '#999',
+ },
+ },
+ axisLabel: {
+ distance: 15,
+ color: '#999',
+ fontSize: 10,
+ },
+ anchor: {
+ show: true,
+ showAbove: true,
+ size: 10,
+ itemStyle: {
+ borderWidth: 3,
+ },
+ },
+ title: {
+ show: false,
+ },
+ detail: {
+ valueAnimation: true,
+ fontSize: 20,
+ offsetCenter: [0, '70%'],
+ formatter: '{value}Hz',
+ },
+ data: [
+ {
+ value: 56,
+ },
+ ],
+ },
+ ],
+ }
+ // const weightOption = {
+ // // title: {
+ // // text: 'Referer of a Website',
+ // // subtext: 'Fake Data',
+ // // left: 'center'
+ // // },
+ // color: ['#1595EA', '#2C4D90', '#FF7F7F'],
+ // tooltip: {
+ // trigger: 'item',
+ // },
+ // radius: [0, '85%'],
+ // // grid: {
+ // // top: 20,
+ // // left: 20,
+ // // right: 20,
+ // // bottom: 20,
+ // // },
+ // // legend: {
+ // // orient: 'vertical',
+ // // left: 'left',
+ // // },
+ // series: [
+ // {
+ // name: '閲嶉噺鏁版嵁',
+ // type: 'pie',
+ // radius: '50%',
+ // data: [
+ // { value: 1048, name: '鍓╀綑閲嶉噺' },
+ // { value: 735, name: '鐑樺幓閲嶉噺' },
+ // ],
+ // label: {
+ // show: false,
+ // },
+ // labelLine: {
+ // show: false,
+ // },
+ // emphasis: {
+ // itemStyle: {
+ // shadowBlur: 10,
+ // shadowOffsetX: 0,
+ // shadowColor: 'rgba(0, 0, 0, 0.5)',
+ // },
+ // },
+ // },
+ // ],
+ // }
+
+ const progressBarOption = {
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // // Use axis to trigger tooltip
+ // type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+ // },
+ // },
+ // color: [
+ // '#0653F6',
+ // // '#1B61E7',
+ // '#3673D5',
+ // // '#4A80C8',
+ // '#608FB8',
+ // // '#719BAD',
+ // '#82A6A1',
+ // // '#8DAD9A',
+ // '#9CB790',
+ // // '#A7BE88',
+ // '#B3C681',
+ // '#CAD671',
+ // '#DBE165',
+ // ],
+ animation: false, // 鍏抽棴鍔ㄧ敾
+ color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'],
+ grid: {
+ top: '12%',
+ left: '20',
+ right: '55',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ min: 0,
+ max: 150,
+ show: false,
+ type: 'value',
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ yAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'category',
+ data: ['鏃堕棿'],
+ },
+ series: [
+ // {
+ // name: '绗竴闃舵',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // barWidth: 26,
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [30],
+ // },
+ // {
+ // name: '绗簩闃舵',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [30],
+ // },
+ // {
+ // name: 'Affiliate Ad',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [20],
+ // },
+ // {
+ // name: 'Video Ad',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [15],
+ // },
+ // {
+ // name: 'Search Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [10],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [5],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [5],
+ // },
+ // {
+ // name: 'df Engine',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: true,
+ // },
+ // emphasis: {
+ // focus: 'series',
+ // },
+ // data: [
+ // {
+ // value: 35,
+ // itemStyle: {
+ // color: '#c0c0c0',
+ // },
+ // },
+ // ],
+ // },
+ ],
+ }
+
+ const efficiencyLineOption = {
+ title: {},
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: '20%',
+ left: '17',
+ right: '57',
+ bottom: '0%',
+ containLabel: true,
+ },
+ legend: {},
+ xAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'value',
+ min: 0,
+ max: 150,
+ // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1],
+ },
+ yAxis: {
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ type: 'value',
+ axisLabel: {
+ formatter: '{value} 掳C',
+ },
+ },
+ series: [
+ {
+ name: '骞茬嚗鏁堢巼',
+ type: 'line',
+ lineStyle: {
+ width: 1,
+ },
+ // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
+ data: [
+ [0, 1],
+ [15, 10],
+ [45, 11],
+ [70, 6],
+ ],
+ markPoint: {
+ data: [
+ { type: 'max', name: 'Max' },
+ { type: 'min', name: 'Min' },
+ ],
+ },
+ // markLine: {
+ // data: [{ type: 'average', name: 'Avg' }],
+ // },
+ },
+ ],
+ }
+
+ option && moisChart.setOption(option)
+ waterOption && waterChart.setOption(waterOption)
+ bellowsOption && bellowsTempChart.setOption(bellowsOption)
+ fanFreqOption && fanFreqChart.setOption(fanFreqOption)
+
+ progressBarOption && progressBarChart.setOption(progressBarOption)
+ efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
+ }
+
+ function queryEqp() {
+ queryById({ id: router.currentRoute.value.params.id }).then((res) => {
+ // console.log(`output->res`, res)
+ eqp.value = res
+ queryRealTime()
+ setTimeout(initCharts, 500)
+ })
+ }
+
+ function queryRealTime() {
+ let tenantId = userStore.getTenant
+ let eqpCode = eqp.value.code
+ let queryRealTimeUrl = '/dry/real/getRealTimeData'
+ defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
+
+ if (res && res.trendVo) {
+ console.log(`output->re11s`, res)
+ // 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),
+ ]
+ if (waterChart) {
+ waterChart.setOption({
+ series: [
+ {
+ data: res.mois,
+ label: {
+ formatter: function () {
+ return res.trendVo.moisture + '%'
+ },
+ fontSize: 20,
+ },
+ },
+ ],
+ })
+ }
+
+ /**娓╁害鐜舰鍥� */
+ if (bellowsTempChart) {
+ bellowsTempChart.setOption({
+ series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }],
+ })
+ }
+ /**椋庢満棰戠巼鐜舰鍥� */
+ if (fanFreqChart) {
+ fanFreqChart.setOption({
+ series: [
+ {
+ data: [
+ {
+ value: res.trendVo.fanFrequency,
+ },
+ ],
+ },
+ ],
+ })
+ }
+ /**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */
+ if (res && res.detailList) {
+ var progressSeries = []
+ var ganZaoXiaoLv = []
+ var zhengQiXiaoHao = []
+ var dianNengXiaoHao = []
+ var totalTime = 0
+ var beforeWeight = 0
+ res.moisList = []
+
+ res.detailList.forEach((item) => {
+ console.log(`output->item`, item)
+ res.moisList.push([item.totalTime, item.moisture])
+ console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
+ var curDryTime = item.totalTime - totalTime
+
+ if (curDryTime > 0) {
+ progressSeries.push({
+ name: item.moisture,
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [item.totalTime - totalTime],
+ })
+ ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])
+
+ totalTime = item.totalTime
+ }
+ beforeWeight = item.weight
+ })
+ if (res.remain) {
+ if (res.dryTime - totalTime > 0) {
+ progressSeries.push({
+ name: '褰撳墠',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [
+ {
+ value: res.dryTime - totalTime,
+ },
+ ],
+ })
+ }
+
+ progressSeries.push({
+ name: '鍓╀綑',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [
+ {
+ value: res.remain - (res.dryTime - totalTime),
+ itemStyle: {
+ color: '#c0c0c0',
+ },
+ },
+ ],
+ })
+ }
+
+ /**骞茬嚗杩涘害 */
+ if (progressBarChart) {
+ console.log(`output->progressSeries`, progressSeries)
+ progressBarChart.setOption(
+ {
+ xAxis: {
+ max: totalTime + res.remain,
+ },
+ series: progressSeries,
+ },
+ { replaceMerge: ['series'] }
+ )
+ }
+
+ res.totalTime = totalTime + res.remain
+ /**骞茬嚗鏁堢巼銆佹秷鑰� */
+ if (efficiencyLineChart) {
+ console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
+ efficiencyLineChart.setOption({
+ xAxis: {
+ max: totalTime + res.remain,
+ },
+ series: [{ data: ganZaoXiaoLv }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
+ })
+ }
+
+ res.moisList.push([res.dryTime, res.trendVo.moisture])
+ }
+
+ /**娓╁害瓒嬪娍 */
+ if (res && res.bellowsTemp) {
+ Array.from(Object.entries(res.bellowsTemp))
+ var arr = Object.keys(res.bellowsTemp)
+ var temArr = []
+ arr.forEach((item) => {
+ temArr.push([item * 1, res.bellowsTemp[item]])
+ })
+
+ //console.log(`output->arr` + JSON.stringify(temArr))
+ res.tempArr = temArr
+ }
+
+ /**骞茬嚗杩囩▼瓒嬪娍 */
+ if (moisChart) {
+ //console.log(`output->鏇存柊chart`)
+ moisChart.setOption({
+ series: [
+ {
+ data: res.moisList,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '鐩爣',
+ yAxis: res.target,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}%',
+ },
+ },
+ },
+ {
+ data: res.tempArr,
+ },
+ ],
+ })
+ }
+
+ /**鏁堢巼瀵规瘮鍥� */
+ res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
+ if (res.xiaolv > standard.value.xiaolv) {
+ res.xlgood = true
+ res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
+ res.xlrHeight = '100%'
+ } else if (res.xiaolv < standard.value.xlMin) {
+ res.xlbad = true
+ res.xlsHeight = '100%'
+ res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
+ }
+
+
+ /** 鐢佃兘娑堣�� */
+ res.dian = (res.watt / (res.originWeight - res.yield))
+ if (res.dian > standard.value.dian) {
+ res.dngood = true
+ res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
+ res.dnrHeight = '100%'
+ } else if (res.dian < standard.value.dMin) {
+ res.dnbad = true
+ res.dnsHeight = '100%'
+ res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
+ }
+
+ /**gif鍔ㄥ浘 */
+ res.gif = 'refeng2'
+ } else {
+ res = {
+ mois: [],
+ }
+ }
+ console.log(`output->res`, res)
+ realData.value = res
+ })
+ }
+
+ queryEqp()
+ // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛�
+ onMounted(() => {
+ Timer.value = setInterval(queryRealTime, 3000)
+ })
+
+ onUnmounted(() => {
+ clearInterval(Timer.value)
+ Timer.value = null
+ })
+</script>
+
+<style scoped>
+ .eqpBox {
+ height: 100%;
+ }
+ .eqpRow {
+ }
+ .eqpImage {
+ height: 860px;
+ width: 1800px;
+ background-image: url(/src/assets/images/dry/ganzaoji-x.png);
+ background-repeat: no-repeat;
+
+ background-position: 160px 280px;
+ /* background-color: red; */
+ padding: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ }
+
+ .leftEqp {
+ height: 840px;
+ width: 780px;
+ /* background-color: white;
+ background-image: url(/src/assets/images/dry/shebei1.png);
+ background-repeat: no-repeat;
+ background-size: 125%;
+ border-radius: 10px;
+ background-position: -119px 293px; */
+ }
+
+ .leftTop {
+ height: 600px;
+ display: flex;
+ justify-content: center;
+ align-content: flex-start;
+ background-color: white;
+ background-image: url(/src/assets/images/dry/shebei1.png);
+ background-repeat: no-repeat;
+ background-size: 110%;
+ border-radius: 10px;
+ flex-wrap: wrap;
+ background-position: -78px 119px;
+ }
+ .leftMid {
+ padding-top: 10px;
+ width: 780px;
+ height: 230px;
+ /* border: 1px solid; */
+ margin-top: 10px;
+ border-radius: 10px;
+ background: white;
+ }
+ .mainInfo {
+ line-height: 33px;
+ padding-left: 10px;
+ font-size: 30px;
+ }
+ .subhead {
+ color: #a19f9c;
+ font-size: 16px;
+ padding-left: 10px;
+ }
+
+ .mainInfo2 {
+ line-height: 20px;
+ padding-left: 0px;
+ font-size: 16px;
+ }
+ .subhead2 {
+ color: #a19f9c;
+ font-size: 10px;
+ padding-left: 0px;
+ }
+ .zhengqi {
+ height: 180px;
+ width: 200px;
+ background-image: url(/src/assets/images/dry/liuliangji.png);
+ background-repeat: no-repeat;
+ background-size: 160px;
+ /* border-radius: 10px; */
+ background-position: 17px -6px;
+ }
+
+ .liuliangji {
+ }
+ .leftData {
+ height: 180px;
+ width: 120px;
+ }
+ .rightChart {
+ height: 180px;
+ width: 170px;
+ margin-top: -30px;
+ }
+ .leftTop1 {
+ width: 220px;
+ height: 200px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px;
+ color: #727272;
+ }
+ .leftTop2 {
+ width: 250px;
+ height: 200px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px;
+ color: #727272;
+ }
+ .leftTop3 {
+ width: 340px;
+ height: 200px;
+ /* background-image: url(/src/assets/images/dry/fanliao.gif); */
+ background-repeat: no-repeat;
+ background-position: 0px 20px;
+ background-size: 300px;
+ border-radius: 50px;
+ }
+
+ .eqpStatus {
+ width: 780px;
+ height: 300px;
+
+ padding: 100px;
+ }
+ .rightInfo {
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ height: 850px;
+ width: 900px;
+ }
+
+ .rightTop {
+ display: flex;
+ height: 360px;
+ padding-left: 10px;
+ }
+ .rightTwo {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .infoChart {
+ width: 290px;
+ height: 230px;
+ background: white;
+ margin-left: 10px;
+ margin-top: 10px;
+ border-radius: 10px;
+ }
+ .chartTittle {
+ width: 290px;
+ height: 30px;
+ font-size: 16px;
+ display: flex;
+ justify-content: space-between;
+ padding: 15px 15px;
+ }
+ .chartInfo {
+ width: 60px;
+ height: 180px;
+ }
+
+ .compareBar {
+ width: 55px;
+ height: 140px;
+ }
+ .margintop-30 {
+ margin-top: -30px;
+ }
+
+ .barTop {
+ width: 55px;
+ height: 30px;
+ }
+ .barBack {
+ width: 30px;
+ height: 100px;
+ /* border: 1px solid black; */
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-end;
+ }
+ .barDiv {
+ width: 100%;
+
+ background-color: #1595ea;
+ }
+ .bad {
+ background-color: #ed6f6f;
+ }
+ .rightLabel {
+ width: 110px;
+ display: flex;
+ justify-content: space-between;
+ }
+ .label {
+ color: white;
+ text-align: center;
+ width: 50px;
+ border-radius: 4px;
+ height: 20px;
+ font-size: 10px;
+ line-height: 21px;
+ }
+ .good {
+ background-color: #2ecf54;
+ }
+
+ .mainInfo3 {
+ font-size: 24px;
+ }
+ .herbInfo {
+ width: 290px;
+ height: 360px;
+ color: #727272;
+ }
+
+ .curEqp {
+ width: 290px;
+ height: 120px;
+ background: white;
+ border-radius: 10px;
+ }
+ .curHerb {
+ margin-top: 10px;
+ width: 290px;
+ height: 230px;
+ background: white;
+ border-radius: 10px;
+ background-image: url(/src/assets/images/dry/yaocai.jpg);
+ background-repeat: no-repeat;
+ background-size: 110px 90px;
+ background-position: 10px 10px;
+ }
+ .tempMoisChart {
+ width: 590px;
+ height: 360px;
+ background: white;
+ margin-left: 10px;
+ padding: 20px;
+ border-radius: 10px;
+ }
+ .topLeft {
+ margin: 20px 40px 60px 20px;
+ padding: 15px;
+ background: white;
+ border-radius: 10px;
+ height: 325px;
+ width: 440px;
+ /* background-image: url(/src/assets/images/dry/yaocai.jpg); */
+ background-repeat: no-repeat;
+ background-size: 164px 132px;
+ background-position: 239px 65px;
+ display: flex;
+ }
+ .topMid {
+ margin: 20px 20px 60px 40px;
+ background: white;
+ border-radius: 10px;
+ background-image: url(/src/assets/images/dry/fanliao.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 20px;
+ background-size: 400px;
+ width: 400px;
+
+ padding: 20px;
+ }
+ .topRight {
+ margin: 20px 20px 60px 20px;
+ background: white;
+ border-radius: 10px;
+ width: 700px;
+ padding: 20px;
+ }
+ .midLeft {
+ height: 450px;
+ width: 600px;
+ display: flex;
+ padding: 0 20px 20px 20px;
+ }
+ .midMid {
+ width: 500px;
+ padding-top: 50px;
+ }
+
+ .midRight {
+ background-image: url(/src/assets/images/dry/fengjixz.gif);
+ background-repeat: no-repeat;
+ background-position: 150px 260px;
+ background-size: 120px 120px;
+ width: 600px;
+ }
+
+ .shangJianTou {
+ margin-left: 140px;
+ width: 70px;
+ height: 100px;
+ background-image: url(/src/assets/images/dry/shangjiantoutou.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ background-size: 70px 100px;
+ }
+
+ .zoujiantou {
+ margin-left: 225px;
+ margin-top: 30px;
+ width: 100px;
+ height: 70px;
+ background-image: url(/src/assets/images/dry/zuojiantou.gif);
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ background-size: 100px 70px;
+ }
+ .fault {
+ padding: 10px;
+ height: 60px;
+ font-size: 26px;
+ width: 100%;
+ text-align: right;
+ color: red;
+ }
+ .eqpName {
+ padding: 20px;
+
+ height: 160px;
+ }
+
+ .formula {
+ display: flex;
+ width: 290px;
+ height: 40px;
+ padding: 0 20px;
+ justify-content: space-around;
+ justify-items: center;
+ }
+
+ .formulaItem {
+ display: flex;
+ justify-content: center;
+ width: 85px;
+ height: 40px;
+ }
+
+ .eqpInfoText {
+ font-size: 18px;
+ font-weight: bold;
+ }
+
+ :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: 10px !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(216, 216, 216);
+
+ height: 20px;
+ width: 10px !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: 30px !important;
+ height: 30px !important;
+ bottom: -26px !important;
+ left: -6px;
+ border: none;
+ background: #ce0000;
+ }
+ :deep() .progress {
+ padding: 25px 25px;
+
+ width: 360px;
+ display: flex;
+ }
+ :deep() .ant-progress-bg {
+ height: 25px !important;
+ }
+ .outDiv {
+ display: flex;
+ justify-content: center;
+ justify-items: center;
+ }
+ .blingbling {
+ -webkit-animation: scaleout 1.5s infinite ease-in-out;
+ animation: scaleout 1.5s infinite ease-in-out;
+ }
+ .center {
+ display: flex;
+ justify-content: center;
+ justify-items: center;
+ align-items: center;
+ flex-wrap: wrap;
+ text-align: center;
+ }
+
+ .centerText {
+ width: 100%;
+ text-align: center;
+ }
+
+ @-webkit-keyframes scaleout {
+ 0% {
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ -webkit-transform: scale(1.1);
+ opacity: 0;
+ }
+ }
+
+ @keyframes scaleout {
+ 0% {
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(1.1);
+ -webkit-transform: scale(1.1);
+ opacity: 0;
+ }
+ }
+</style>
diff --git a/src/views/dry/monitor/WorkShop.vue b/src/views/dry/monitor/WorkShop.vue
index 3781483..a2ade85 100644
--- a/src/views/dry/monitor/WorkShop.vue
+++ b/src/views/dry/monitor/WorkShop.vue
@@ -12,7 +12,7 @@
<span class="info-text">{{ realTime.get(item.id)?.dryTime | 0 }}</span> 鍒嗛挓
</div>
- <div style="padding: 0 10px; width: 200px; height: 40px">
+ <div style="padding: 0 10px; width: 195px; height: 40px">
<div style="padding-top: 10px">
<Progress
:stroke-color="{
@@ -21,6 +21,7 @@
}"
:percent="realTime.get(item.id)?.percent"
status="active"
+ trailColor="#2b2b2b2b"
:show-info="false"
/>
</div>
@@ -54,18 +55,18 @@
</div>
<div class="eqpStatus">
- <div> <span class="info-text">缈绘枡</span> </div>
+ <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"
+ <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: 10px; text-align: center; margin-top: -25px">鐩爣锛歿{ realTime.get(item.id)?.target }}%</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> -->
@@ -85,7 +86,7 @@
vertical
/>
<div
- >鐑锛�<span class="info-text">{{ realTime.get(item.id)?.windTemp | 0 }}</span> 掳C</div
+ class="info-text">鐑锛�<span >{{ realTime.get(item.id)?.windTemp | 0 }}</span> 掳C</div
>
</div>
</div>
@@ -356,7 +357,7 @@
// + '\n\n\n鐩爣'+(mois.value[2]*100).toFixed(2) + '%'
)
},
- fontSize: 10,
+ fontSize: 14,
//position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
},
},
@@ -387,7 +388,7 @@
console.log(`output->res`, res)
if (res && res.trendVo) {
res.tempValue = [res.windTemp, 100]
- res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
+ 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),
@@ -401,7 +402,7 @@
formatter: function () {
return res.trendVo.moisture + '%'
},
- fontSize: 10,
+ fontSize: 14,
//position: ['50%',(100- res.trendVo.moisture)+ '%'],
},
},
@@ -449,12 +450,13 @@
.eqp-content {
height: 100%;
- background-color: white;
- background-image: url('../../../assets/images/dry/ganzaoji-x.png');
- background-repeat: no-repeat;
- background-size: 60% 60%;
- background-position: 105px 150px;
- border-radius: 8px;
+ 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 {
@@ -475,13 +477,13 @@
}
.eqpStatus {
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;
+ 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;
@@ -498,7 +500,7 @@
}
.info-text {
- font-size: 16px;
+ font-size: 14px;
font-weight: bold;
}
.herbName {
@@ -514,13 +516,14 @@
line-height: 35px;
}
.eqpName {
- margin-top: 68px;
- margin-left: 150px;
- width: 95px;
- font-weight: bold;
- text-align: center;
- background-color: white;
- height: 22px;
+ margin-top: 190px;
+ margin-left: 129px;
+ width: 95px;
+ /* font-size: 14px; */
+ font-weight: bold;
+ text-align: center;
+ background-color: white;
+ height: 22px;
}
.tempChart {
diff --git a/src/views/sys/login/LoginSelect.vue b/src/views/sys/login/LoginSelect.vue
index 975b050..57ad48d 100644
--- a/src/views/sys/login/LoginSelect.vue
+++ b/src/views/sys/login/LoginSelect.vue
@@ -144,6 +144,7 @@
}
let multi_depart = loginResult.multi_depart;
+ console.log("loginResult::",loginResult);
//0:鏃犻儴闂� 1:涓�涓儴闂� 2:澶氫釜閮ㄩ棬
if (multi_depart == 0) {
notification.warn({
@@ -262,6 +263,7 @@
* 寮圭獥鎵撳紑鍓嶅鐞�
*/
async function show(loginResult) {
+ console.log("showLoginResult::", loginResult);
if (loginResult) {
username.value = userStore.username;
await reset();
diff --git a/src/views/system/loginmini/MiniLogin.vue b/src/views/system/loginmini/MiniLogin.vue
index 52a5d4f..9ffc1c6 100644
--- a/src/views/system/loginmini/MiniLogin.vue
+++ b/src/views/system/loginmini/MiniLogin.vue
@@ -48,7 +48,7 @@
<a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
</a-form-item>
</div>
- <div class="aui-inputClear">
+ <!-- <div class="aui-inputClear">
<i class="icon icon-code"></i>
<a-form-item>
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
@@ -57,7 +57,7 @@
<img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
<img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
</div>
- </div>
+ </div> -->
<div class="aui-flex">
<div class="aui-flex-box">
<div class="aui-choice">
@@ -226,15 +226,15 @@
/**
* 鑾峰彇楠岃瘉鐮�
*/
- function handleChangeCheckCode() {
- formData.inputCode = ''
+ // function handleChangeCheckCode() {
+ // formData.inputCode = ''
- randCodeData.checkKey = 1629428467008
- getCodeInfo(randCodeData.checkKey).then((res) => {
- randCodeData.randCodeImage = res
- randCodeData.requestCodeSuccess = true
- })
- }
+ // randCodeData.checkKey = 1629428467008
+ // getCodeInfo(randCodeData.checkKey).then((res) => {
+ // randCodeData.randCodeImage = res
+ // randCodeData.requestCodeSuccess = true
+ // })
+ // }
/**
* 鍒囨崲鐧诲綍鏂瑰紡
@@ -288,7 +288,7 @@
description: error.message || t('sys.login.networkExceptionMsg'),
duration: 3,
})
- handleChangeCheckCode()
+ // handleChangeCheckCode()
} finally {
loginLoading.value = false
}
@@ -393,7 +393,7 @@
Object.assign(phoneFormData, { mobile: '', smscode: '' })
type.value = 'login'
activeIndex.value = 'accountLogin'
- handleChangeCheckCode()
+ // handleChangeCheckCode()
}
/**
@@ -418,7 +418,7 @@
onMounted(() => {
//鍔犺浇楠岃瘉鐮�
- handleChangeCheckCode()
+ // handleChangeCheckCode()
})
</script>
--
Gitblit v1.9.3