12/src/views/thres.vue

<template>
  <div>
    <!-- 显示当前阈值 -->
    <p>当前阈值: {{ currentThreshold }}</p>
    
    <!-- 显示默认阈值 -->
    <p>默认阈值: {{ defaultThreshold }}</p>

    <!-- 输入框和按钮用于设置新阈值 -->
    <el-input v-model="newThreshold" placeholder="请输入新阈值"></el-input>
    <el-button type="primary" @click="updateThreshold">更新阈值</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentThreshold: null,
      defaultThreshold: null,
      newThreshold: '' // 新增阈值输入框的绑定值
    };
  },
  methods: {
    // 获取阈值信息
    fetchThresholds() {
      axios.get('https://127.0.0.1:5000/get-threshold')
        .then(response => {
          this.currentThreshold = response.data.current_threshold;
          this.defaultThreshold = response.data.default_threshold;
        })
        .catch(error => {
          console.error("获取阈值失败:", error);
        });
    },
    // 更新阈值
    updateThreshold() {
      const thresholdValue = parseFloat(this.newThreshold); // 将输入转换为浮点数
      if (isNaN(thresholdValue) || thresholdValue <= 0) {
        this.$message.error('请输入有效的正数');
        return;
      }
      
      axios.post('https://127.0.0.1:5000/update-threshold', { threshold: thresholdValue })
        .then(response => {
          if (response.data.success) {
            this.currentThreshold = thresholdValue; // 更新当前阈值显示
            this.$message.success(response.data.message);
          } else {
            this.$message.error(response.data.error);
          }
        })
        .catch(error => {
          console.error("更新阈值失败:", error);
          this.$message.error('更新阈值时发生错误');
        });
    }
  },
  mounted() {
    // 页面加载时获取阈值
    this.fetchThresholds();
  }
}
</script>

<style scoped>
/* 添加一些样式让页面看起来更好 */
.el-input {
  margin-top: 10px;
}

.el-button {
  margin-top: 10px;
}
</style>