From 05a001098514eb86065b6277ebe3ead90837f833 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 03 六月 2025 09:50:33 +0800
Subject: [PATCH] fix:修改自动播放
---
src/views/screen/temperature/monitor/index.vue | 97 +++++++++++++++++++++++++++++++++++++++---------
1 files changed, 79 insertions(+), 18 deletions(-)
diff --git a/src/views/screen/temperature/monitor/index.vue b/src/views/screen/temperature/monitor/index.vue
index bdd961c..45b5bdc 100644
--- a/src/views/screen/temperature/monitor/index.vue
+++ b/src/views/screen/temperature/monitor/index.vue
@@ -1,5 +1,5 @@
<script setup>
-import {ref, onMounted} from "vue";
+import {ref, onMounted, onUnmounted} from "vue";
import {getUserType} from '@/utils/auth.js'
import {setTempMonitor, getTempMonitorConfig, editTempMonitorConfig} from '@/api/screen/monitor/index.js'
import {getTemperaturePointList} from '@/api/screen/index.js'
@@ -11,16 +11,22 @@
const menuList = ref([])
const monitorList = ref([])
+const selectDeep = ref([])
const monitorConfig = ref({})
const userType = ref(getUserType())
const monitorRef = ref()
const searchVal = ref('')
+let timer = null;
// 选择菜单
const handleSelectMenu = (id) => {
- pointApi().get(id).then(res => {
- monitorList.value = [res.data]
- })
+ clearInterval(timer)
+ getMonitorList(id)
+}
+
+// 搜索
+const handleSearch = () => {
+ getMonitorList()
}
// 获取水温监控点菜单
@@ -31,32 +37,54 @@
}
// 获取监控点列表
-const getMonitorList = () => {
- pointApi().search({type: 1, page: 1, limit: 100, keywords: searchVal.value}).then(res => {
+const getMonitorList = (id) => {
+ clearInterval(timer)
+ const data = {
+ type: 1,
+ page: 1,
+ limit: 100,
+ keywords: searchVal.value,
+ pointId: id || ''
+ }
+ pointApi().search(data).then(res => {
//0-未报警， 1-下限报警， 2-上限报警
- monitorList.value = res.data.list.filter(el => el.parentId !== 0).map(item => {
+ monitorList.value = res.data.list.filter(el => el.parentId !== 0).map((item, index) => {
+ selectDeep.value[index] = item?.dataList[0].code
return {
...item,
errorType: Number(item.waterTemperature) < Number(item.lowWaterLevel) ? 1 : Number(item.waterTemperature) > Number(item.tallWaterLevel) ? 2 : 0
}
})
})
+
+ // 挂载定时器获取数据
+ timer = setInterval(() => {
+ pointApi().search(data).then(res => {
+ monitorList.value = res.data.list.filter(el => el.parentId !== 0).map(item => {
+ return {
+ ...item,
+ errorType: Number(item.waterTemperature) < Number(item.lowWaterLevel) ? 1 : Number(item.waterTemperature) > Number(item.tallWaterLevel) ? 2 : 0
+ }
+ })
+ })
+ }, 5000)
}
-// 获取监控点参数
+// 获取监控点配置
const getMonitorConfig = () => {
getTempMonitorConfig().then(res => {
monitorConfig.value = res.data
})
}
-// 设置监控点参数
+// 设置监控点配置
const setMonitorConfig = () => {
editTempMonitorConfig(monitorConfig.value).then(res => {
ElMessage.success('设置成功')
})
}
+// 监控点参数设置
const setMonitorData = (data) => {
setTempMonitor(data).then(res => {
if (res.code === 200) {
@@ -75,6 +103,12 @@
getTempMonitor()
getMonitorList()
getMonitorConfig()
+})
+
+onUnmounted(() => {
+ if(timer) {
+ clearInterval(timer)
+ }
})
</script>
@@ -105,7 +139,7 @@
<div class="monitor-tool">
<div class="tool-l">
<el-input v-model="searchVal" style="width: 20rem" placeholder="请输入监测点名称" clearable/>
- <el-button @click="getMonitorList">
+ <el-button @click="handleSearch">
<el-icon>
<Search/>
</el-icon>
@@ -145,11 +179,25 @@
<div class="item-data">
<div class="data">
<div class="name">水温:</div>
- <div class="val"><span>{{ item.waterTemperature }}</span>°C</div>
+ <div class="val"><span>{{ item?.dataList?.find(f => f.code === selectDeep[index]).value }}</span>°C</div>
</div>
<div class="data">
<div class="name">水位:</div>
- <div class="val"><span>{{ item.waterLevel }}</span>m</div>
+ <div class="val">
+ <el-select
+ v-model="selectDeep[index]"
+ class="val-select"
+ placeholder="Select"
+ style="width: 12rem"
+ >
+ <el-option
+ v-for="item in item?.dataList"
+ :key="item.code"
+ :label='item.code'
+ :value="item.code"
+ />
+ </el-select>m
+ </div>
</div>
</div>
<div class="item-status">
@@ -182,11 +230,11 @@
<div class="item-btn">
<el-button size="large" type="success" @click="setMonitorData(item)">应用</el-button>
</div>
- <div class="item-error" v-if="[1,2].includes(item.errorType)">
- <img src="@/assets/images/warning.png" alt="" />
- <div v-if="item.errorType === 1">水温达到下限值</div>
- <div v-else-if="item.errorType === 2">水温达到上限值</div>
- </div>
+<!-- <div class="item-error" v-if="[1,2].includes(item.errorType)">-->
+<!-- <img src="@/assets/images/warning.png" alt="" />-->
+<!-- <div v-if="item.errorType === 1">水温达到下限值</div>-->
+<!-- <div v-else-if="item.errorType === 2">水温达到上限值</div>-->
+<!-- </div>-->
</div>
</div>
</div>
@@ -352,11 +400,24 @@
font-size: 22px;
.val {
- span {
+ span{
display: inline-block;
font-size: 30px;
padding: 0 30px;
}
+ .val-select{
+ padding: 0 30px;
+ :deep(.el-select__wrapper){
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 0;
+ border-bottom: 1px solid #fff;
+ font-size: 20px;
+ .el-select__caret{
+ color: #fff;
+ }
+ }
+ }
}
}
}
--
Gitblit v1.9.3