From bd11d32a4e0fab6e4e6c4a32d5e7e3fe26abb271 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期五, 06 十二月 2024 16:15:11 +0800
Subject: [PATCH] 完成设备大屏，新增报警大屏
---
src/views/dry/bigScreen/BigFaultCloud.vue | 905 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 599 insertions(+), 306 deletions(-)
diff --git a/src/views/dry/bigScreen/BigFaultCloud.vue b/src/views/dry/bigScreen/BigFaultCloud.vue
index 3ec3f30..86dad08 100644
--- a/src/views/dry/bigScreen/BigFaultCloud.vue
+++ b/src/views/dry/bigScreen/BigFaultCloud.vue
@@ -4,10 +4,14 @@
<div class="eqpRow">
<div class="eqpImage" :style="{ 'background-position': position + 'px' }">
<div class="leftEqp">
-
<dv-border-box7 class="leftTop">
<div class="leftTop0">
+ <div style="padding-top: 20px; padding-left: 10px" @click="back">
+ <Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" />
+ </div>
+
<div class="leftTop1">
+
<Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
<div>
<div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div>
@@ -41,241 +45,177 @@
</div>
</div>
</div>
- <div style="width: 1200px; height: 798px; position: absolute;">
- <div v-if="true | zuoqianjiting" class="error-div" style=" top:466px; left:589px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style="width: 70px;">
- 宸﹀墠鎬ュ仠
- </div>
- </div>
- <div v-if="true | shebeijiting" class="error-div" style=" top:170px; left:702px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 106px;">
- 璁惧鎬ュ仠锛堟�伙級
- </div>
- </div>
- <div v-if="true | chuliaojiting" class="error-div" style=" top:450px; left:158px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 70px;">
- 鍑烘枡鎬ュ仠
- </div>
- </div>
- <div v-if="true | mianbanjiting" class="error-div" style=" top:398px; left:978px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 70px;">
- 闈㈡澘鎬ュ仠
- </div>
- </div>
- <div v-if="true | fengxiangsheng" class="error-div" style=" top:476px; left:753px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 86px;">
- 椋庣鍗囧紓甯�
- </div>
- </div>
- <div v-if="true | fengxiangjiang" class="error-div" style=" top:502px; left:753px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 86px;">
- 椋庣闄嶅紓甯�
- </div>
- </div>
- <div v-if="true | fengjiguoliu" class="error-div" style=" top:510px; left:975px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 70px;">
- 椋庢満杩囨祦
- </div>
- </div>
- <div v-if="true | guntongsheng" class="error-div" style=" top:331px; left:753px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 86px;">
- 婊氱瓛鍗囧紓甯�
- </div>
- </div>
- <div v-if="true | guntongjiang" class="error-div" style=" top:356px; left:753px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 86px;">
- 婊氱瓛闄嶅紓甯�
- </div>
- </div>
- <div v-if="true | guntongguoliu" class="error-div" style=" top:324px; left:916px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 70px;">
- 婊氱瓛杩囨祦
- </div>
- </div>
- <div v-if="true | wendubaojing" class="error-div" style=" top:373px; left:978px">
- <div class="blingbling error-marker" ></div>
- <div class="error-msg" style=" width: 70px;">
- 娓╁害鎶ヨ
- </div>
- </div>
+ <div style="width: 1200px; height: 798px; position: absolute">
+ <div v-if="zuoqianjiting" class="error-div" style="top: 466px; left: 589px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 70px"> 宸﹀墠鎬ュ仠 </div>
+ </div>
+ <div v-if="shebeijiting" class="error-div" style="top: 170px; left: 702px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 106px"> 璁惧鎬ュ仠锛堟�伙級 </div>
+ </div>
+ <div v-if="chuliaojiting" class="error-div" style="top: 450px; left: 158px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 70px"> 鍑烘枡鎬ュ仠 </div>
+ </div>
+ <div v-if="mianbanjiting" class="error-div" style="top: 398px; left: 978px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 70px"> 闈㈡澘鎬ュ仠 </div>
+ </div>
+ <div v-if="fengxiangsheng" class="error-div" style="top: 476px; left: 753px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 86px"> 椋庣鍗囧紓甯� </div>
+ </div>
+ <div v-if="fengxiangjiang" class="error-div" style="top: 502px; left: 753px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 86px"> 椋庣闄嶅紓甯� </div>
+ </div>
+ <div v-if="fengjiguoliu" class="error-div" style="top: 510px; left: 975px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 70px"> 椋庢満杩囨祦 </div>
+ </div>
+ <div v-if="guntongsheng" class="error-div" style="top: 331px; left: 753px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 86px"> 婊氱瓛鍗囧紓甯� </div>
+ </div>
+ <div v-if="guntongjiang" class="error-div" style="top: 356px; left: 753px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 86px"> 婊氱瓛闄嶅紓甯� </div>
+ </div>
+ <div v-if="guntongguoliu" class="error-div" style="top: 324px; left: 916px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 70px"> 婊氱瓛杩囨祦 </div>
+ </div>
+ <div v-if="wendubaojing" class="error-div" style="top: 373px; left: 978px">
+ <div class="blingbling error-marker"></div>
+ <div class="error-msg" style="width: 70px"> 娓╁害鎶ヨ </div>
+ </div>
- <div v-if="true | zuoqianmen" class="error-div" style=" top:595px; left:591px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 80px;">
- 宸﹀墠闂ㄦ姤璀�
- </div>
- </div>
- <div v-if="true | zuohoumen" class="error-div" style=" top:565px; left:868px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 80px;">
- 宸﹀悗闂ㄦ姤璀�
- </div>
- </div>
- <div v-if="true | youqianmen" class="error-div" style=" top:593px; left:396px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 80px;">
- 鍙冲墠闂ㄦ姤璀�
- </div>
- </div>
- <div v-if="true | youhoumen" class="error-div" style=" top:565px; left:697px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 80px;">
- 鍙冲悗闂ㄦ姤璀�
- </div>
- </div>
+ <div v-if="zuoqianmen" class="error-div" style="top: 595px; left: 591px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 80px"> 宸﹀墠闂ㄦ姤璀� </div>
+ </div>
+ <div v-if="zuohoumen" class="error-div" style="top: 565px; left: 868px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 80px"> 宸﹀悗闂ㄦ姤璀� </div>
+ </div>
+ <div v-if="youqianmen" class="error-div" style="top: 593px; left: 396px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 80px"> 鍙冲墠闂ㄦ姤璀� </div>
+ </div>
+ <div v-if="youhoumen" class="error-div" style="top: 565px; left: 697px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 80px"> 鍙冲悗闂ㄦ姤璀� </div>
+ </div>
- <div v-if="true | guntongbuzaigaowei" class="error-div" style=" top:304px; left:753px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 100px;">
- 婊氱瓛涓嶅湪楂樹綅
- </div>
- </div>
- <div v-if="true | fengxiangbuzaigaowei" class="error-div" style=" top:451px; left:753px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 100px;">
- 椋庣涓嶅湪楂樹綅
- </div>
- </div>
- <div v-if="true | fengxiangbuzaidiwei" class="error-div" style=" top:528px; left:753px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 100px;">
- 椋庣涓嶅湪浣庝綅
- </div>
- </div>
- <div v-if="true | jiareweichuanganqi" class="error-div" style=" top:433px; left:904px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 鍔犵儹浣嶄紶鎰熷櫒鎶ヨ
- </div>
- </div>
- <div v-if="true | zuoqianfengxianggaowei" class="error-div" style=" top:502px; left:535px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 宸﹀墠椋庣涓嶅湪楂樹綅
- </div>
- </div>
- <div v-if="true | zuoqianfengxiangdiwei" class="error-div" style=" top:528px; left:535px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 宸﹀墠椋庣涓嶅湪浣庝綅
- </div>
- </div>
- <div v-if="true | zuohoufengxianggaowei" class="error-div" style=" top:459px; left:904px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 宸﹀悗椋庣涓嶅湪楂樹綅
- </div>
- </div>
- <div v-if="true | zuohoufengxiangdiwei" class="error-div" style=" top:484px; left:904px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 宸﹀悗椋庣涓嶅湪浣庝綅
- </div>
- </div>
- <div v-if="true | youqianfengxianggaowei" class="error-div" style=" top:447px; left:420px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 鍙冲墠椋庣涓嶅湪楂樹綅
- </div>
- </div>
- <div v-if="true | youqianfengxiangdiwei" class="error-div" style=" top:473px; left:420px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 鍙冲墠椋庣涓嶅湪浣庝綅
- </div>
- </div>
- <div v-if="true | youhoufengxianggaowei" class="error-div" style=" top:383px; left:805px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 鍙冲悗椋庣涓嶅湪楂樹綅
- </div>
- </div>
- <div v-if="true | youhoufengxiangdiwei" class="error-div" style=" top:408px; left:805px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 鍙冲悗椋庣涓嶅湪浣庝綅
- </div>
- </div>
- <div v-if="true | zuoqianguntongdiwei" class="error-div" style=" top:343px; left:530px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 宸﹀墠婊氱瓛涓嶅湪浣庝綅
- </div>
- </div>
- <div v-if="true | zuohouguntongdiwei" class="error-div" style=" top:296px; left:916px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 宸﹀悗婊氱瓛涓嶅湪浣庝綅
- </div>
- </div>
- <div v-if="true | youqianguntongdiwei" class="error-div" style=" top:316px; left:419px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 鍙冲墠婊氱瓛涓嶅湪浣庝綅
- </div>
- </div>
- <div v-if="true | youhouguntongdiwei" class="error-div" style=" top:270px; left:797px">
- <div class="blingbling warn-marker" ></div>
- <div class="warn-msg" style=" width: 126px;">
- 鍙冲悗婊氱瓛涓嶅湪浣庝綅
- </div>
- </div>
-
- </div>
+ <div v-if="guntongbuzaigaowei" class="error-div" style="top: 304px; left: 753px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 100px"> 婊氱瓛涓嶅湪楂樹綅 </div>
+ </div>
+ <div v-if="fengxiangbuzaigaowei" class="error-div" style="top: 451px; left: 753px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 100px"> 椋庣涓嶅湪楂樹綅 </div>
+ </div>
+ <div v-if="fengxiangbuzaidiwei" class="error-div" style="top: 528px; left: 753px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 100px"> 椋庣涓嶅湪浣庝綅 </div>
+ </div>
+ <div v-if="jiareweichuanganqi" class="error-div" style="top: 433px; left: 904px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 鍔犵儹浣嶄紶鎰熷櫒鎶ヨ </div>
+ </div>
+ <div v-if="zuoqianfengxianggaowei" class="error-div" style="top: 502px; left: 535px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 宸﹀墠椋庣涓嶅湪楂樹綅 </div>
+ </div>
+ <div v-if="zuoqianfengxiangdiwei" class="error-div" style="top: 528px; left: 535px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 宸﹀墠椋庣涓嶅湪浣庝綅 </div>
+ </div>
+ <div v-if="zuohoufengxianggaowei" class="error-div" style="top: 459px; left: 904px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 宸﹀悗椋庣涓嶅湪楂樹綅 </div>
+ </div>
+ <div v-if="zuohoufengxiangdiwei" class="error-div" style="top: 484px; left: 904px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 宸﹀悗椋庣涓嶅湪浣庝綅 </div>
+ </div>
+ <div v-if="youqianfengxianggaowei" class="error-div" style="top: 447px; left: 420px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 鍙冲墠椋庣涓嶅湪楂樹綅 </div>
+ </div>
+ <div v-if="youqianfengxiangdiwei" class="error-div" style="top: 473px; left: 420px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 鍙冲墠椋庣涓嶅湪浣庝綅 </div>
+ </div>
+ <div v-if="youhoufengxianggaowei" class="error-div" style="top: 383px; left: 805px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 鍙冲悗椋庣涓嶅湪楂樹綅 </div>
+ </div>
+ <div v-if="youhoufengxiangdiwei" class="error-div" style="top: 408px; left: 805px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 鍙冲悗椋庣涓嶅湪浣庝綅 </div>
+ </div>
+ <div v-if="zuoqianguntongdiwei" class="error-div" style="top: 343px; left: 530px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 宸﹀墠婊氱瓛涓嶅湪浣庝綅 </div>
+ </div>
+ <div v-if="zuohouguntongdiwei" class="error-div" style="top: 296px; left: 916px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 宸﹀悗婊氱瓛涓嶅湪浣庝綅 </div>
+ </div>
+ <div v-if="youqianguntongdiwei" class="error-div" style="top: 316px; left: 419px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 鍙冲墠婊氱瓛涓嶅湪浣庝綅 </div>
+ </div>
+ <div v-if="youhouguntongdiwei" class="error-div" style="top: 270px; left: 797px">
+ <div class="blingbling warn-marker"></div>
+ <div class="warn-msg" style="width: 126px"> 鍙冲悗婊氱瓛涓嶅湪浣庝綅 </div>
+ </div>
+ </div>
</dv-border-box7>
-
-
</div>
<div class="rightInfo">
<div class="rightTop">
<dv-border-box7 class="tempMoisChart">
-
+ <a-row>
+ <a-col :span="7">鏁呴殰鍚嶇О</a-col>
+ <a-col :span="7">寮�濮嬫椂闂�</a-col>
+ <a-col :span="7">缁撴潫鏃堕棿</a-col>
+ <a-col :span="3">鎸佺画鏃堕暱</a-col>
+ </a-row>
+ <div ref="scrollContainer" class="scroll-container">
+ <a-row v-for="item in faultList" :key="item.id">
+ <a-col :span="7">{{ item.faultName }}</a-col>
+ <a-col :span="7">{{ item.startTime }}</a-col>
+ <a-col :span="7">{{ item.endTime }}</a-col>
+ <a-col :span="3">{{ item.totalTime }}</a-col>
+ </a-row>
+ </div>
</dv-border-box7>
</div>
<div class="rightTwo">
<dv-border-box7 class="infoChart">
- <div class="chartTittle">
- 鏁呴殰鏃堕暱缁熻
-
- </div>
- <div class="outDiv" style="padding-top: 20px">
-
- </div>
+ <div class="chartTittle"> 鏁呴殰鏃堕暱缁熻 </div>
+ <!-- <div class="outDiv" style="padding-top: 20px">-->
+ <!-- -->
+ <!-- </div>-->
+ <div :id="'chartDom'" style="width: 340px; height: 280px"></div>
</dv-border-box7>
<dv-border-box7 class="infoChart">
- <div class="chartTittle"
- >鏁呴殰娆℃暟绾�
-
- </div>
- <div class="outDiv" style="padding-top: 20px">
-
- </div>
+ <div class="chartTittle">鏁呴殰娆℃暟绾� </div>
+ <div :id="'chartDom2'" style="width: 340px; height: 280px"></div>
</dv-border-box7>
<dv-border-box7 class="infoChart">
<div class="chartTittle">璀﹀憡鏃堕暱缁熻</div>
- <div class="outDiv" style="padding-top: 10px">
-
- </div>
+ <div :id="'chartDom3'" style="width: 340px; height: 280px"></div>
</dv-border-box7>
<dv-border-box7 class="infoChart">
<div class="chartTittle">
<div> 璀﹀憡娆℃暟缁熻</div>
-
</div>
- <div class="outDiv" style="padding-top: 20px">
-
- </div>
+ <div :id="'chartDom4'" style="width: 340px; height: 280px"></div>
</dv-border-box7>
</div>
</div>
@@ -296,7 +236,7 @@
import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
import { defHttp } from '/@/utils/http/axios'
import { queryById, listAll } from '../api/DryEquipment.api'
- import { queryByOrderId } from '../dryFaultRecord/DryFaultRecord.api'
+ import { queryByOrderId } from '../dryFaultRecord/DryFaultRecord.api'
import { dryEquipment } from '../dataDefine/DryEquipment.data'
import { useUserStore } from '/@/store/modules/user'
const domRef = ref<Nullable<HTMLElement>>(null)
@@ -305,58 +245,66 @@
const { toggle: toggleDom } = useFullscreen(domRef)
const Timer = ref()
const Timer2 = ref()
-
+ const scrollContainer = ref(null)
+ let scrollInterval = null
+ const isScrolling = ref(false) // 鎺у埗鏄惁姝ｅ湪婊氬姩浠ラ槻姝㈤噸澶嶈Е鍙�
const eqps = ref([] as dryEquipment[])
console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query)
const eqp = ref({} as dryEquipment)
const eqpNum = ref(router.currentRoute.value.query.num || 1)
- const tenant = ref(router.currentRoute.value.query.tenant)
+ const tenant = ref(router.currentRoute.value.query.tenant)
const userStore = useUserStore()
- const realData = ref({})
-
+ const realData = ref({
+ code: 0,
+ })
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'
+ // const faultConst = ['鎬ュ仠鎶ヨ','宸﹀墠鎬ュ仠','闈㈡澘鎬ュ仠','鍑烘枡鎬ュ仠','娓╁害澶辨帶','婊氱瓛鍗�','婊氱瓛闄�','婊氱瓛鐢垫満杩囨祦','椋庣鍗�','椋庣闄�','椋庣椋庢満杩囨祦']
+ // const warningConst = ['宸﹀墠闂�','鍙冲墠闂�','宸﹀悗闂�','鍙冲悗闂�','婊氱瓛涓嶅湪楂樹綅','椋庣涓嶅湪浣庝綅','椋庣涓嶅湪楂樹綅','鍔犵儹浣嶄紶鎰熷櫒','宸﹀墠椋庣楂樹綅浼犳劅鍣�','鍙冲墠椋庣楂樹綅浼犳劅鍣�','宸﹀悗椋庣楂樹綅浼犳劅鍣�','鍙冲悗椋庣楂樹綅浼犳劅鍣�','宸﹀墠椋庣浣庝綅浼犳劅鍣�','鍙冲墠椋庣浣庝綅浼犳劅鍣�','宸﹀悗椋庣浣庝綅浼犳劅鍣�','鍙冲悗椋庣浣庝綅浼犳劅鍣�','宸﹀墠婊氱瓛浣庝綅浼犳劅鍣�','鍙冲墠婊氱瓛浣庝綅浼犳劅鍣�','宸﹀悗婊氱瓛浣庝綅浼犳劅鍣�','鍙冲悗婊氱瓛浣庝綅浼犳劅鍣�']
+ //----------------error----------------
+ const shebeijiting = ref(false)
+ const chuliaojiting = ref(false)
+ const zuoqianjiting = ref(false)
+ const mianbanjiting = ref(false)
+ const fengxiangsheng = ref(false)
+ const fengxiangjiang = ref(false)
+ const fengjiguoliu = ref(false)
+ const guntongsheng = ref(false)
+ const guntongjiang = ref(false)
+ const guntongguoliu = ref(false)
+ const wendubaojing = ref(false)
+ //--------------warning------------
+ const zuoqianmen = ref(false)
+ const zuohoumen = ref(false)
+ const youqianmen = ref(false)
+ const youhoumen = ref(false)
+ const guntongbuzaigaowei = ref(false)
+ const fengxiangbuzaigaowei = ref(false)
+ const fengxiangbuzaidiwei = ref(false)
+ const jiareweichuanganqi = ref(false)
+ const zuoqianfengxianggaowei = ref(false)
+ const zuohoufengxianggaowei = ref(false)
+ const youqianfengxianggaowei = ref(false)
+ const youhoufengxianggaowei = ref(false)
+ const zuoqianfengxiangdiwei = ref(false)
+ const zuohoufengxiangdiwei = ref(false)
+ const youqianfengxiangdiwei = ref(false)
+ const youhoufengxiangdiwei = ref(false)
+ const zuoqianguntongdiwei = ref(false)
+ const zuohouguntongdiwei = ref(false)
+ const youqianguntongdiwei = ref(false)
+ const youhouguntongdiwei = ref(false)
- //----------------error----------------
- const shebeijiting = ref(false)
- const chuliaojiting = ref(false)
- const zuoqianjiting = ref(false)
- const mianbanjiting = ref(false)
- const fengxiangsheng = ref(false)
- const fengxiangjiang = ref(false)
- const fengjiguoliu = ref(false)
- const guntongsheng = ref(false)
- const guntongjiang = ref(false)
- const guntongguoliu = ref(false)
- const wendubaojing = ref(false)
- //--------------warning------------
- const zuoqianmen = ref(false)
- const zuohoumen = ref(false)
- const youqianmen = ref(false)
- const youhoumen = ref(false)
- const guntongbuzaigaowei = ref(false)
- const fengxiangbuzaigaowei = ref(false)
- const fengxiangbuzaidiwei = ref(false)
- const jiareweichuanganqi = ref(false)
- const zuoqianfengxianggaowei = ref(false)
- const zuohoufengxianggaowei = ref(false)
- const youqianfengxianggaowei = ref(false)
- const youhoufengxianggaowei = ref(false)
- const zuoqianfengxiangdiwei = ref(false)
- const zuohoufengxiangdiwei = ref(false)
- const youqianfengxiangdiwei = ref(false)
- const youhoufengxiangdiwei = ref(false)
- const zuoqianguntongdiwei = ref(false)
- const zuohouguntongdiwei = ref(false)
- const youqianguntongdiwei = ref(false)
- const youhouguntongdiwei = ref(false)
-
-
+ const faultList = ref([])
+ var chart1: echarts.ECharts
+ var chart2: echarts.ECharts
+ var chart3: echarts.ECharts
+ var chart4: echarts.ECharts
// 鍔ㄦ�佽鍙栧浘鐗�
function getHerbImageUrl(name: string) {
return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href
@@ -364,12 +312,11 @@
// 鍔ㄦ�佽鍙栧浘鐗�
function getStatusImageUrl(name: string) {
- if (name =='zanting') {
+ if (name == 'zanting') {
return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href
} else {
return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href
}
-
}
function queryEqp() {
queryById({ id: router.currentRoute.value.params.id }).then((res) => {
@@ -397,8 +344,145 @@
})
}
- var num = eqpNum.value
+ function initCharts() {
+ let chartDom1: HTMLElement = document.getElementById('chartDom') as HTMLElement
+ let chartDom2: HTMLElement = document.getElementById('chartDom2') as HTMLElement
+ let chartDom3: HTMLElement = document.getElementById('chartDom3') as HTMLElement
+ let chartDom4: HTMLElement = document.getElementById('chartDom4') as HTMLElement
+ chart1 = echarts.init(chartDom1)
+ chart2 = echarts.init(chartDom2)
+ chart3 = echarts.init(chartDom3)
+ chart4 = echarts.init(chartDom4)
+
+ const option2 = {
+ grid: {
+ left: '13%', // 宸﹁竟璺濓紝涔熷彲浠ユ槸鍏蜂綋鐨勫儚绱犲�硷紝渚嬪 50
+ right: '6%', // 鍙宠竟璺�
+ top: '13%', // 涓婅竟璺�
+ bottom: '35%', // 璁剧疆涓嬭竟璺濓紝渚嬪杩欓噷璁剧疆涓�15%
+ },
+ xAxis: {
+ type: 'category',
+ data: [],
+ axisLabel: {
+ rotate: 55, // 杩欓噷璁剧疆鏃嬭浆鐨勮搴︼紝姝ｅ�艰〃绀洪『鏃堕拡鏃嬭浆
+ interval: 0, // 寮哄埗鏄剧ず鎵�鏈夋爣绛撅紝涓嶈繘琛岄棿闅旀樉绀�
+ color: '#fff', // 璁剧疆X杞存爣绛惧瓧浣撻鑹�
+ },
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ color: '#fff', // 璁剧疆Y杞存爣绛惧瓧浣撻鑹�
+ },
+ splitLine: { show: false }, // 涓嶆樉绀篩杞村垎鍓茬嚎锛堢綉鏍肩嚎锛�
+ },
+ series: [
+ {
+ data: [],
+ type: 'bar',
+ itemStyle: {
+ color: '#3398DB', // 鎸囧畾鏌卞瓙鐨勯鑹�
+ },
+ },
+ ],
+ }
+ const option1 = {
+ tooltip: {
+ trigger: 'item',
+ },
+
+ series: [
+ {
+ data: [],
+ type: 'pie',
+ radius: '50%',
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ },
+ },
+ label: {
+ show: true, // 鏄剧ず鏍囩
+ //position: 'outside', // 鏍囩鐨勪綅缃紝鍙互鏄� 'outside', 'inside', 'center'
+ //formatter: '{b}: {c} ({d}%)', // 鏍囩鍐呭鏍煎紡鍖栧嚱鏁版垨瀛楃涓叉ā鏉�
+ fontSize: 12, // 璁剧疆瀛椾綋澶у皬
+ // fontWeight: 'bold', // 璁剧疆瀛椾綋绮楃粏
+ color: '#fff', // 璁剧疆瀛椾綋棰滆壊
+ },
+ },
+ ],
+ }
+ const option4 = {
+ grid: {
+ left: '13%', // 宸﹁竟璺濓紝涔熷彲浠ユ槸鍏蜂綋鐨勫儚绱犲�硷紝渚嬪 50
+ right: '6%', // 鍙宠竟璺�
+ top: '13%', // 涓婅竟璺�
+ bottom: '35%', // 璁剧疆涓嬭竟璺濓紝渚嬪杩欓噷璁剧疆涓�15%
+ },
+ xAxis: {
+ type: 'category',
+ data: [],
+ axisLabel: {
+ rotate: 55, // 杩欓噷璁剧疆鏃嬭浆鐨勮搴︼紝姝ｅ�艰〃绀洪『鏃堕拡鏃嬭浆
+ interval: 0, // 寮哄埗鏄剧ず鎵�鏈夋爣绛撅紝涓嶈繘琛岄棿闅旀樉绀�
+ color: '#fff', // 璁剧疆X杞存爣绛惧瓧浣撻鑹�
+ },
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ color: '#fff', // 璁剧疆Y杞存爣绛惧瓧浣撻鑹�
+ },
+ splitLine: { show: false }, // 涓嶆樉绀篩杞村垎鍓茬嚎锛堢綉鏍肩嚎锛�
+ },
+ series: [
+ {
+ data: [],
+ type: 'bar',
+ itemStyle: {
+ color: '#3398DB', // 鎸囧畾鏌卞瓙鐨勯鑹�
+ },
+ },
+ ],
+ }
+ const option3 = {
+ tooltip: {
+ trigger: 'item',
+ },
+
+ series: [
+ {
+ data: [],
+ type: 'pie',
+ radius: '50%',
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ },
+ },
+ label: {
+ show: true, // 鏄剧ず鏍囩
+ //position: 'outside', // 鏍囩鐨勪綅缃紝鍙互鏄� 'outside', 'inside', 'center'
+ //formatter: '{b}: {c} ({d}%)', // 鏍囩鍐呭鏍煎紡鍖栧嚱鏁版垨瀛楃涓叉ā鏉�
+ fontSize: 12, // 璁剧疆瀛椾綋澶у皬
+ //fontWeight: 'bold', // 璁剧疆瀛椾綋绮楃粏
+ color: '#fff', // 璁剧疆瀛椾綋棰滆壊
+ },
+ },
+ ],
+ }
+
+ option1 && chart1.setOption(option1)
+ option2 && chart2.setOption(option2)
+ option3 && chart3.setOption(option3)
+ option4 && chart4.setOption(option4)
+ }
var shangliaoFlag = false
var statusGif = 'tmrefeng2'
@@ -421,7 +505,12 @@
}, 7000)
}, 15000)
}
-
+ function back() {
+ router.back()
+ }
+ /**
+ * 鏌ヨ瀹炴椂鏁版嵁
+ */
function queryRealTime() {
if (eqp.value) {
eqp.value = eqps.value[eqpNum.value]
@@ -432,6 +521,7 @@
defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenant.value, machineid: eqpCode } }).then((res) => {
if (res && res.trendVo) {
console.log(`output->re11s`, res)
+ var totalTime = 0
/**姘存淮鍥惧惈姘撮噺 */
res.mois = [
@@ -439,7 +529,6 @@
(res.trendVo.moisture / 100 / 1.5).toFixed(2),
(res.trendVo.moisture / 100 / 3).toFixed(2),
]
-
/**鐘舵��/gif鍔ㄥ浘 */
if (!shangliaoFlag) {
@@ -466,8 +555,8 @@
// }
// if (res.state_fan == 1) {
- statusGif = 'tmrefeng2'
- statusTxt = '姝ｅ湪骞茬嚗'
+ statusGif = 'tmrefeng2'
+ statusTxt = '姝ｅ湪骞茬嚗'
// }
// if (res.state_roller == 4) {
@@ -507,19 +596,115 @@
} else if (res.herbName == '妗戠櫧鐨�') {
res.herbImage = 'sangbaipi.png'
}
-
+
res.isError = false
if (res.fault) {
res.isError = true
res.errorMsg = res.fault
- console.log("errorMsg:",res.fault)
+ const faults = res.fault;
+ console.log('errorMsg:', res.fault)
+ if (faults.includes('鎬ュ仠鎶ヨ')) {
+ shebeijiting.value = true;
+ }
+ if (faults.includes('宸﹀墠鎬ュ仠')) {
+ zuoqianjiting.value = true;
+ }
+ if (faults.includes('闈㈡澘鎬ュ仠')) {
+ mianbanjiting.value = true;
+ }
+ if (faults.includes('鍑烘枡鎬ュ仠')) {
+ chuliaojiting.value = true;
+ }
+ if (faults.includes('娓╁害澶辨帶')) {
+ wendubaojing.value = true;
+ }
+ if (faults.includes('婊氱瓛鍗�')) {
+ guntongsheng.value = true;
+ }
+ if (faults.includes('婊氱瓛闄�')) {
+ guntongjiang.value = true;
+ }
+ if (faults.includes('婊氱瓛鐢垫満杩囨祦')) {
+ guntongguoliu.value = true;
+ }
+ if (faults.includes('椋庣鍗�')) {
+ fengxiangsheng.value = true;
+ }
+ if (faults.includes('椋庣闄�')) {
+ fengxiangjiang.value = true;
+ }
+ if (faults.includes('椋庣椋庢満杩囨祦')) {
+ fengjiguoliu.value = true;
+ }
}
if (res.warning) {
res.isWarning = true
res.warnMsg = res.warning
- console.log("warnMsg:",res.warning)
+ const warnings = res.warning;
+ console.log('warnMsg:', res.warning)
+ if (warnings.includes('宸﹀墠闂�')) {
+ zuoqianmen.value = true;
+ }
+ if (warnings.includes('鍙冲墠闂�')) {
+ youqianmen.value = true;
+ }
+ if (warnings.includes('宸﹀悗闂�')) {
+ zuohoumen.value = true;
+ }
+ if (warnings.includes('鍙冲悗闂�')) {
+ youhoumen.value = true;
+ }
+ if (warnings.includes('婊氱瓛涓嶅湪楂樹綅')) {
+ guntongbuzaigaowei.value = true;
+ }
+ if (warnings.includes('椋庣涓嶅湪浣庝綅')) {
+ fengxiangbuzaidiwei.value = true;
+ }
+ if (warnings.includes('椋庣涓嶅湪楂樹綅')) {
+ fengxiangbuzaigaowei.value = true;
+ }
+ if (warnings.includes('鍔犵儹浣嶄紶鎰熷櫒')) {
+ jiareweichuanganqi.value = true;
+ }
+ if (warnings.includes('宸﹀墠椋庣楂樹綅浼犳劅鍣�')) {
+ zuoqianfengxianggaowei.value = true;
+ }
+ if (warnings.includes('鍙冲墠椋庣楂樹綅浼犳劅鍣�')) {
+ youqianfengxianggaowei.value = true;
+ }
+ if (warnings.includes('宸﹀悗椋庣楂樹綅浼犳劅鍣�')) {
+ zuohoufengxianggaowei.value = true;
+ }
+ if (warnings.includes('鍙冲悗椋庣楂樹綅浼犳劅鍣�')) {
+ youhoufengxianggaowei.value = true;
+ }
+ if (warnings.includes('宸﹀墠椋庣浣庝綅浼犳劅鍣�')) {
+ zuoqianfengxiangdiwei.value = true;
+ }
+ if (warnings.includes('鍙冲墠椋庣浣庝綅浼犳劅鍣�')) {
+ youqianfengxiangdiwei.value = true;
+ }
+ if (warnings.includes('宸﹀悗椋庣浣庝綅浼犳劅鍣�')) {
+ zuohoufengxiangdiwei.value = true;
+ }
+ if (warnings.includes('鍙冲悗椋庣浣庝綅浼犳劅鍣�')) {
+ youhoufengxiangdiwei.value = true;
+ }
+ if (warnings.includes('宸﹀墠婊氱瓛浣庝綅浼犳劅鍣�')) {
+ zuoqianguntongdiwei.value = true;
+ }
+ if (warnings.includes('鍙冲墠婊氱瓛浣庝綅浼犳劅鍣�')) {
+ youqianguntongdiwei.value = true;
+ }
+ if (warnings.includes('宸﹀悗婊氱瓛浣庝綅浼犳劅鍣�')) {
+ zuohouguntongdiwei.value = true;
+ }
+ if (warnings.includes('鍙冲悗婊氱瓛浣庝綅浼犳劅鍣�')) {
+ youhouguntongdiwei.value = true;
+ }
}
+ getRealFault()
} else {
res = {
mois: [],
@@ -527,30 +712,87 @@
herbImage: 'yaocai1.png',
}
}
- var totalTime = 0
- res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0
+
+ res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0
// console.log(`output->res`, res.detailList[res.detailList.length-1])
realData.value = res
- getRealFault()
+
})
}
}
+ /**
+ * 鏌ヨ褰撳墠宸ュ崟鏁呴殰鏄庣粏
+ */
+ function getRealFault() {
+ return new Promise(() => {
+ queryByOrderId({ orderId: realData.value.code, tenantId: tenant.value }).then((res) => {
+ const faultStats = {}
+ const warningStats = {}
+ // 寰幆鍒楄〃锛屾牴鎹粨鏉熸椂闂村拰寮�濮嬫椂闂达紝璁＄畻鏁呴殰鏃堕暱
+ res.forEach((item) => {
+ const faultName = item.faultName
+ item.totalTime = new Date(item.endTime) - new Date(item.startTime)
+ item.totalTime = item.totalTime / 1000
- function getRealFault() {
- return new Promise((resolve, reject) => {
- queryByOrderId({ orderId: realData.value.code, tenantId: tenant.value }).then((res) => {
- console.log(`output->res`, res)
+ if (item.faultType === 1) {
+ if (!faultStats[faultName]) {
+ faultStats[faultName] = {
+ count: 0,
+ totalDuration: 0, // 姣
+ }
+ }
+ // 鏇存柊缁熻鏁版嵁
+ faultStats[faultName].count += 1
+ faultStats[faultName].totalDuration += item.totalTime
+ } else if (item.faultType === 2) {
+ if (!warningStats[faultName]) {
+ warningStats[faultName] = {
+ count: 0,
+ totalDuration: 0, // 姣
+ }
+ }
+ // 鏇存柊缁熻鏁版嵁
+ warningStats[faultName].count += 1
+ warningStats[faultName].totalDuration += item.totalTime
+ }
+ })
+ console.log(`output->res`, res)
+ faultList.value = res
+ const prepareFault = prepareData(faultStats)
+ const prepareWarning = prepareData(warningStats)
+ console.log('prePareFault', prepareFault)
+ console.log('prePareWarning', prepareWarning)
+ chart1.setOption({
- // 寰幆鍒楄〃锛屾牴鎹粨鏉熸椂闂村拰寮�濮嬫椂闂达紝璁＄畻鏁呴殰鏃堕暱
- res.forEach((item) => {
- item.totalTime = item.endTime - item.startTime
- })
-})
- })
- }
+ series: [{ data: prepareFault.duration }],
+ })
+ chart2.setOption({
+ xAxis: { data: prepareFault.faultNames },
+ series: [{ data: prepareFault.count }],
+ })
+ chart3.setOption({
+ series: [{ data: prepareWarning.duration }],
+ })
+ chart4.setOption({
+ xAxis: { data: prepareWarning.faultNames },
+ series: [{ data: prepareWarning.count }],
+ })
+ })
+ })
+ }
+ // 灏嗙粺璁℃暟鎹浆鎹负閫傚悎ECharts浣跨敤鐨勬牸寮�
+ function prepareData(stats) {
+ const faultNames = Object.keys(stats)
+ const durationSorted = faultNames.sort((a, b) => stats[b].totalDuration - stats[a].totalDuration)
+ const countSorted = faultNames.sort((a, b) => stats[b].count - stats[a].count)
-
+ return {
+ faultNames: faultNames,
+ duration: durationSorted.map((name) => ({ name, value: stats[name].totalDuration })),
+ count: countSorted.map((name) => ({ name, value: stats[name].count })),
+ }
+ }
var move = true
function moveImage() {
if (move) {
@@ -566,8 +808,39 @@
}
}
- function back() {
- router.back()
+ // 寮�濮嬭嚜鍔ㄦ粴鍔�
+ const startAutoScroll = () => {
+ console.log('寮�濮嬭嚜鍔ㄦ粴鍔�')
+ scrollInterval = setInterval(() => {
+ if (isScrolling.value) return
+ isScrolling.value = true
+
+ const container = scrollContainer.value
+
+ // 婊氬姩瀹瑰櫒
+ container.scrollTop += 1
+ // 褰撴粴鍔ㄥ埌搴曢儴鏃讹紝閲嶇疆鍒伴《閮�
+ if (container.scrollTop >= container.scrollHeight - container.clientHeight) {
+ setTimeout(() => {
+ container.scrollTop = 0
+ isScrolling.value = false // 绔嬪嵆鍏佽涓嬩竴娆℃粴鍔ㄥ紑濮�
+ return
+ }, 2000)
+ }
+ if (container.scrollTop < container.scrollHeight - container.clientHeight) {
+ setTimeout(() => {
+ isScrolling.value = false
+ }, 20) // 纭繚姣忔婊氬姩闂撮殧瓒冲闀匡紝閬垮厤杩炵画瑙﹀彂
+ }
+ }, 20) // 鎺у埗婊氬姩閫熷害锛屾暟鍊艰秺灏忔粴鍔ㄨ秺蹇�
+
+ }
+
+ // 鍋滄鑷姩婊氬姩
+ const stopAutoScroll = () => {
+ if (scrollInterval) {
+ clearInterval(scrollInterval)
+ }
}
listAllEqp()
@@ -576,6 +849,8 @@
onMounted(() => {
Timer.value = setInterval(queryRealTime, 3000)
Timer2.value = setInterval(moveImage, 50)
+ startAutoScroll()
+ setTimeout(initCharts, 500)
})
onUnmounted(() => {
@@ -583,6 +858,7 @@
clearInterval(Timer2.value)
Timer.value = null
Timer2.value = null
+ stopAutoScroll()
})
</script>
@@ -726,7 +1002,6 @@
.eqpStatus {
width: 848px;
-
}
.rightInfo {
display: flex;
@@ -738,7 +1013,7 @@
.rightTop {
display: flex;
- height: 440px;
+ height: 340px;
padding-left: 10px;
}
.rightTwo {
@@ -748,7 +1023,7 @@
.infoChart {
width: 340px;
- height: 300px;
+ height: 350px;
/* background: white; */
margin-left: 10px;
margin-top: 10px;
@@ -842,7 +1117,7 @@
}
.tempMoisChart {
width: 690px;
- height: 440px;
+ height: 340px;
/* background: white; */
padding: 20px;
@@ -1016,8 +1291,8 @@
justify-items: center;
}
.blingbling {
- -webkit-animation: scaleout 1.0s infinite ease-in-out;
- animation: scaleout 1.0s infinite ease-in-out;
+ -webkit-animation: scaleout 1s infinite ease-in-out;
+ animation: scaleout 1s infinite ease-in-out;
}
.center {
display: flex;
@@ -1056,23 +1331,41 @@
opacity: 0;
}
}
- .error-div {
- position: absolute; display: flex; align-items: center;
- }
- .error-marker {
- width: 18px; height: 18px; background: red; border-radius: 50%;
- }
- .error-msg {
- margin-left: 6px;
- height: 24px;
- background: gray; border-radius: 5px; font-weight: bold; color: red
- }
- .warn-marker {
- width: 18px; height: 18px; background: orange; border-radius: 50%;
- }
- .warn-msg {
- margin-left: 6px;
- height: 24px;
- background: gray; border-radius: 5px; font-weight: bold; color: orange;
- }
+ .error-div {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ }
+ .error-marker {
+ width: 18px;
+ height: 18px;
+ background: red;
+ border-radius: 50%;
+ }
+ .error-msg {
+ margin-left: 6px;
+ height: 24px;
+ background: gray;
+ border-radius: 5px;
+ font-weight: bold;
+ color: red;
+ }
+ .warn-marker {
+ width: 18px;
+ height: 18px;
+ background: orange;
+ border-radius: 50%;
+ }
+ .warn-msg {
+ margin-left: 6px;
+ height: 24px;
+ background: gray;
+ border-radius: 5px;
+ font-weight: bold;
+ color: orange;
+ }
+ .scroll-container {
+ height: 280px; /* 璁剧疆浣犳兂瑕佺殑楂樺害 */
+ overflow: hidden;
+ }
</style>
--
Gitblit v1.9.3