soilgd12/src/views/Admin/modelManagement/AcidReductionModel/thres.vue

<template>
  <div class="container">
    <!-- 降酸阈值 -->
    <el-card class="threshold-card">
      <h3>降酸阈值</h3>
      <p><strong>当前阈值:</strong> {{ currentThresholdReduce }}</p>

      <el-input 
        v-model="newThresholdReduce" 
        placeholder="请输入新的降酸阈值" 
        class="input"
      ></el-input>

      <el-button 
        type="success" 
        @click="updateThreshold('reduce')" 
        class="button"
      >
        更新降酸阈值
      </el-button>
    </el-card>

    <!-- 反酸阈值 -->
    <el-card class="threshold-card">
      <h3>反酸阈值</h3>
      <p><strong>当前阈值:</strong> {{ currentThresholdReflux }}</p>

      <el-input 
        v-model="newThresholdReflux" 
        placeholder="请输入新的反酸阈值" 
        class="input"
      ></el-input>

      <el-button 
        type="success" 
        @click="updateThreshold('reflux')" 
        class="button"
      >
        更新反酸阈值
      </el-button>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      // 当前阈值
      currentThresholdReduce: null,
      currentThresholdReflux: null,
      // 新增阈值输入框绑定值
      newThresholdReduce: '',
      newThresholdReflux: ''
    };
  },
  methods: {
    /**
     * 获取当前阈值信息
     */
    fetchThresholds() {
      axios.get('https://127.0.0.1:5000/get-threshold')
        .then(response => {
          const { reduce, reflux } = response.data;
          this.currentThresholdReduce = reduce.current_threshold;
          this.currentThresholdReflux = reflux.current_threshold;
        })
        .catch(error => {
          console.error("获取阈值失败:", error);
          this.$message.error('无法加载阈值，请稍后再试');
        });
    },

    /**
     * 更新阈值
     * @param {string} dataType - 数据类型 ('reduce' 或 'reflux')
     */
    updateThreshold(dataType) {
      let thresholdValue, targetVariable;

      if (dataType === 'reduce') {
        thresholdValue = parseFloat(this.newThresholdReduce);
        targetVariable = 'currentThresholdReduce';
      } else if (dataType === 'reflux') {
        thresholdValue = parseFloat(this.newThresholdReflux);
        targetVariable = 'currentThresholdReflux';
      }

      if (isNaN(thresholdValue) || thresholdValue <= 0) {
        this.$message.error('请输入有效的正数');
        return;
      }

      axios.post('https://127.0.0.1:5000/update-threshold', {
        threshold: thresholdValue,
        data_type: dataType
      })
        .then(response => {
          if (response.data.success) {
            this[targetVariable] = 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>
/* 容器样式 */
.container {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

/* 卡片样式 */
.threshold-card {
  flex: 1;
  max-width: 400px;
  min-width: 300px;
  margin: 0 auto;
  padding: 16px;
}

/* 输入框和按钮样式 */
.input {
  width: 100%;
  margin-top: 10px;
}

.button {
  width: 100%;
  margin-top: 10px;
}
</style>