From d37d152c6638aef9bd29887c037f8ef638603d39 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期四, 05 六月 2025 16:30:46 +0800
Subject: [PATCH] 加入报警设置交互
---
src/views/deviceWindoes2.vue | 145 ++++++++++++++++++++++++----
src/style.css | 5 +
src/utils/httpApi.ts | 1
src/views/test.vue | 108 +++++++++++++-------
4 files changed, 196 insertions(+), 63 deletions(-)
diff --git a/src/style.css b/src/style.css
index 16a4423..9b05ea2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -41,4 +41,9 @@
}
.el-loading-spinner .el-loading-text {
font-size: 16px; /* 修改为你需要的字体大小 */
+}
+.el-dialog {
+ padding: 0;
+ padding-bottom: 20px;
+ border-radius: 10px;
}
\ No newline at end of file
diff --git a/src/utils/httpApi.ts b/src/utils/httpApi.ts
index e35467c..d633a12 100644
--- a/src/utils/httpApi.ts
+++ b/src/utils/httpApi.ts
@@ -15,6 +15,7 @@
}
const apiBaseUrl = 'https://backend.ihemodialysis.com'; // 替换为你的API基础URL
+// const apiBaseUrl = 'https://testbs.ihemodialysis.com'; // 替换为你的API基础URL
export const setTimeoutAlert = async (requestData: SetTimeoutAlertRequest): Promise<ApiResponse> => {
try {
diff --git a/src/views/deviceWindoes2.vue b/src/views/deviceWindoes2.vue
index e6edb38..cf686f7 100644
--- a/src/views/deviceWindoes2.vue
+++ b/src/views/deviceWindoes2.vue
@@ -43,9 +43,10 @@
<div style="position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; padding: 5px; height: 100%;">
<div class="grid-container" style="display: flex; align-items: center; padding-right: 20px;">
- <!-- <span style="display: inline-block; margin-right: 15px;">
+ <span style="display: inline-block; margin-right: 15px; font-size: 30px; color: #F56C6C;">{{倒计时显示}}</span>
+ <span style="display: inline-block; margin-right: 15px;">
<img @click="dingshiShow" :src="dingshi" alt="Image 1">
- </span> -->
+ </span>
<span style="display: inline-block;">
<img @click="centerDialogVisible=true" :src="shezhi" alt="Image 2">
</span>
@@ -601,12 +602,19 @@
font-size: 300%;
height: 100%
">
- <span class="grid-container"
- style="height: 100%;color: #303133;padding-right: 20px;"
- >
- <el-image @click="centerDialogVisible=true" :src="shezhi"></el-image>
- </span>
+ <div style="position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; padding: 5px; height: 100%;">
+ <div class="grid-container" style="display: flex; align-items: center; padding-right: 20px;">
+ <span style="display: inline-block; margin-right: 15px; font-size: 30px; color: #F56C6C;">{{倒计时显示}}</span>
+
+ <span style="display: inline-block; margin-right: 15px;">
+ <img @click="dingshiShow" :src="dingshi" alt="Image 1">
+ </span>
+ <span style="display: inline-block;">
+ <img @click="centerDialogVisible=true" :src="shezhi" alt="Image 2">
+ </span>
+ </div>
</div>
+ </div>
</el-row>
</div>
<template v-if="!ispaiban">
@@ -859,13 +867,18 @@
</div>
</template>
</el-dialog>
- <el-dialog v-model="centerDialogVisible2" title="定时任务设置" width="600" center>
+ <el-dialog v-model="centerDialogVisible2" custom-class="custom-dialog" :show-close="false" width="600" center>
+ <template #header="{ titleId, titleClass }">
+ <div class="my-header">
+ <h4 style="color: white;" :id="titleId" :class="titleClass">定时任务设置</h4>
+ </div>
+ </template>
<span>
<div>
<el-form :model="formInline" label-width="100px">
<el-form-item label="时间设定：">
<el-col :span="10">
- <el-input-number style="width: 100%;" v-model="formInline.xiaoshi" :min="1" :max="10" />
+ <el-input-number style="width: 100%;" v-model="formInline.xiaoshi" :min="0" :max="10" />
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500">小时 </span>
@@ -911,6 +924,26 @@
</div>
</template>
</el-dialog>
+ <el-dialog v-model="centerDialogVisible3" custom-class="custom-dialog" :show-close="false" width="700" center>
+ <template #header="{ titleId, titleClass }">
+ <div class="my-header">
+ <h4 style="color: white;" :id="titleId" :class="titleClass">定时任务提醒</h4>
+ </div>
+ </template>
+ <span>
+ <div style="text-align: center;font-size: 30px">
+ <h3>{{倒计时告警文本}}</h3>
+ </div>
+ </span>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="" @click="centerDialogVisible3=false">取消</el-button>
+ <el-button type="primary" @click="centerDialogVisible3=false">
+ 确定
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
@@ -930,7 +963,7 @@
import cljd from '../img/cljd.png'
import tizhong from '../img/tizhong.png'
import {EventSourcePolyfill} from 'event-source-polyfill';
- import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, onUnmounted } from "vue";
+ import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, onUnmounted, onBeforeUnmount } from "vue";
import { Local } from '../utils/storage';
import * as echarts from "echarts";
import { jgTime4 } from "../utils/formatTime";
@@ -1136,6 +1169,7 @@
// 识别数据流
let stream: MediaStream | null = null;
const centerDialogVisible2=ref(false)
+ const centerDialogVisible3=ref(false)
const centerDialogVisible = ref(false);
const background = ref("");
const txztText = ref("");
@@ -1195,6 +1229,13 @@
}
setTimeoutAlert({deviceCode:deviceCode.value,minutes:minutes,alertText:alertText}).then(res=>{
console.log(res.data)
+ if(res.data==='OK'){
+ 倒计时.value=minutes*60
+ centerDialogVisible2.value=false
+ }else{
+ ElMessage.warning(res.message)
+ }
+
})
// centerDialogVisible2.value=false
})
@@ -1336,6 +1377,33 @@
deep: true,
}
);
+ const formatSecondsToTime=(totalSeconds)=> {
+ // 向下取整
+ let hours = Math.floor(totalSeconds / 3600);
+ let minutes = Math.floor((totalSeconds % 3600) / 60);
+ let seconds = totalSeconds % 60;
+
+ // 补零函数
+ const pad = (num) => String(num).padStart(2, '0');
+
+ return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+}
+
+
+ const 倒计时=ref(0)
+ const 倒计时显示=ref('00:00:00')
+ const 倒计时告警文本=ref('')
+ // 定时器回调函数
+ const updateTime = () => {
+ if(倒计时.value>0){
+ 倒计时显示.value = formatSecondsToTime(倒计时.value)
+ 倒计时.value--
+ }else{
+ 倒计时显示.value = ''
+ }
+
+ };
+ let intervalId = null;
onMounted(() => {
let devcieCode=Local.get('devcieCode')
if(devcieCode){
@@ -1344,7 +1412,14 @@
}else{
centerDialogVisible.value=true
}
+ intervalId = setInterval(updateTime, 1000);
+ });
+ // 在组件卸载前清除定时器，防止内存泄漏
+ onBeforeUnmount(() => {
+ if (intervalId) {
+ clearInterval(intervalId);
+ }
});
@@ -1417,20 +1492,6 @@
// http://testbs.ihemodialysis.com/sse/sseEvent
// const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
数据初始化.value=true
- // const loading = ElLoading.service({
- // lock: true,
- // text: '数据初始化中。。。',
- // background: 'rgba(0, 0, 0, 0.7)',
- // svg:`<path class="path" d="
- // M 30 15
- // L 28 17
- // M 25.61 25.61
- // A 15 15, 0, 0, 1, 15 30
- // A 15 15, 0, 1, 1, 27.99 7.5
- // L 15 15
- // " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
- // `
- // })
const test='https://backend.ihemodialysis.com/sse/sseEvent/'
const stateArr = [
{ key: 0, value: "正在链接中" },
@@ -1465,6 +1526,17 @@
const dataBody=JSON.parse(datax)
console.log(dataBody)
console.log(dataBody)
+ if(dataBody.倒计时?.提醒文本){
+ 倒计时.value=dataBody.倒计时?.设定提醒倒计时
+ console.log('设置了倒计时值',倒计时.value)
+ if(倒计时.value<=0&&倒计时.value>=-60){
+ centerDialogVisible3.value=true
+ 倒计时告警文本.value=dataBody.倒计时?.提醒文本
+ 关闭弹框警告()
+ }else if(倒计时.value<=-60){
+ centerDialogVisible3.value=false
+ }
+ }
if(dataBody.推送类型==='床旁血压计'){
isinitXy.value=true
let date = new Date();
@@ -1522,6 +1594,13 @@
setTimeout(()=>{
initTupiao()
},500)
+ }
+ const 关闭弹框警告=()=>{
+ setTimeout(function() {
+ console.log("30秒已过，关闭报警设置弹框。");
+ centerDialogVisible3.value=false
+
+ }, 30000); // 30000 毫秒 = 30 秒
}
//初始化
const sourceInit = () => {
@@ -2207,4 +2286,22 @@
// border: 1px solid #e4e4e4;
// font-size: 16px;
}
+.custom-dialog {
+ border-radius: 10px;
+}
+
+.my-header {
+ background-color: #ff6b6b; /* 标题背景颜色 */
+ color: white; /* 标题文字颜色 */
+ font-size: 18px; /* 标题字体大小 */
+ padding-top: 1px; /* 内边距 */
+ padding-bottom: 1px; /* 内边距 */
+ text-align: center; /* 文字居中 */
+ border-top-left-radius: 10px; /* 左上角圆角 */
+ border-top-right-radius: 10px; /* 右上角圆角 */
+}
+.el-dialog {
+ padding: 0;
+ padding-bottom:10px ;
+}
</style>
diff --git a/src/views/test.vue b/src/views/test.vue
index d58184d..ddbe68b 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -29,45 +29,75 @@
const option = {
title: {
- text: '营养状态和透析情况',
- left: 'center'
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['12:21', '12:22', '12:23', '12:24', '12:25', '12:26', '12:27', '12:28', '12:29', '12:30', '12:31', '12:32', '12:33', '12:34', '12:35', '12:36', '12:37', '12:38']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [1.4, 1.2, 1.4, 1.4, 1.0, 1.4, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.7],
- type: 'line',
- smooth: true,
- color:'red',
- itemStyle: {
- color: function(params) {
- if (params.value > 1.2) {
- return 'red';
- } else {
- return 'blue';
- }
- }.bind(this)
- },
- lineStyle: {
- color: function(params) {
- if (params.value > 1.2) {
- return 'red';
- } else {
- return 'blue';
- }
- }.bind(this)
- }
- }
- ]
+ text: 'Distribution of Electricity',
+ subtext: 'Fake Data'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ // prettier-ignore
+ data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value} W'
+ },
+ axisPointer: {
+ snap: true
+ }
+ },
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [
+ {
+ lte: 2,
+ color: 'green'
+ },
+ {
+ gt: 2,
+ lte: 8,
+ color: 'red'
+ },
+ {
+ gt: 8,
+ lte: 14,
+ color: 'green'
+ },
+ {
+ gt: 14,
+ lte: 17,
+ color: 'red'
+ },
+ {
+ gt: 17,
+ color: 'green'
+ }
+ ]
+ },
+ series: [
+ {
+ name: 'Electricity',
+ type: 'line',
+ smooth: true,
+ // prettier-ignore
+ data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
+
+ }
+ ]
};
this.chartInstance.setOption(option);
--
Gitblit v1.8.0