加入报警设置交互

chenyc

2025-06-05 d37d152c6638aef9bd29887c037f8ef638603d39

加入报警设置交互

 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;
}

 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 {

 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>

 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);