soilgd12/src/views/User/acidModel/pHPrediction.vue

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>{{ $t('PhPrediction.title') }}</span>
      </div>
    </template>

    <el-form
      :model="form"
      ref="predictForm"
      label-width="240px"
      label-position="left"
    >
      <el-form-item :label="$t('PhPrediction.organicMatter')" prop="OM" :error="errorMessages.OM" required>
        <el-input
          v-model="form.OM"
          size="large"
          :placeholder="$t('PhPrediction.organicMatterPlaceholder')"
          @input="handleInput('OM', $event, 0, 35)"
        ></el-input>
      </el-form-item>
      
      <el-form-item :label="$t('PhPrediction.chloride')" prop="CL" :error="errorMessages.CL" required>
        <el-input
          v-model="form.CL"
          size="large"
          :placeholder="$t('PhPrediction.chloridePlaceholder')"
          @input="handleInput('CL', $event, 0, 10)"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('PhPrediction.cationExchangeCapacity')" prop="CEC" :error="errorMessages.CEC" required>
        <el-input
          v-model="form.CEC"
          size="large"
          :placeholder="$t('PhPrediction.cecPlaceholder')"
          @input="handleInput('CEC', $event, 0, 20)"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('PhPrediction.hydrogenIonConcentration')" prop="H" :error="errorMessages.H" required>
        <el-input
          v-model="form.H"
          size="large"
          :placeholder="$t('PhPrediction.hPlaceholder')"
          @input="handleInput('H', $event, 0, 1)"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('PhPrediction.ammoniumNitrogen')" prop="HN" :error="errorMessages.HN" required>
        <el-input
          v-model="form.HN"
          size="large"
          :placeholder="$t('PhPrediction.hnPlaceholder')"
          @input="handleInput('HN', $event, 0, 30)"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('PhPrediction.freeAlumina')" prop="Al3" :error="errorMessages.Al3" required>
        <el-input
          v-model="form.Al3"
          size="large"
          :placeholder="$t('PhPrediction.al3Placeholder')"
          @input="handleInput('Al3', $event, 0, 2)"
        ></el-input>
      </el-form-item>

       <el-form-item :label="$t('PhPrediction.alumina')" prop="AlOx" :error="errorMessages.AlOx" required>
        <el-input
          v-model="form.AlOx"
          size="large"
          :placeholder="$t('PhPrediction.aloxPlaceholder')"
          @input="handleInput('AlOx', $event, 0, 2)"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('PhPrediction.freeIronOxide')" prop="FeOx" :error="errorMessages.FeOx" required>
        <el-input
          v-model="form.FeOx"
          size="large"
          :placeholder="$t('PhPrediction.feoxPlaceholder')"
          @input="handleInput('FeOx', $event, 0, 3)"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('PhPrediction.amorphousIron')" prop="AmFe" :error="errorMessages.AmFe" required>
        <el-input
          v-model="form.AmFe"
          size="large"
          :placeholder="$t('PhPrediction.amfePlaceholder')"
          @input="handleInput('AmFe', $event, 0, 1)"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('PhPrediction.initialPH')" prop="initpH" :error="errorMessages.initpH" required>
        <el-input
          v-model="form.initpH"
          size="large"
          :placeholder="$t('PhPrediction.initphPlaceholder')"
          @input="handleInput('initpH', $event, 0, 14)"
        ></el-input>
      </el-form-item>

      <el-button type="primary" @click="onSubmit" class="onSubmit">{{ $t('PhPrediction.predictButton') }}</el-button>
      <el-dialog v-model="dialogVisible" @close="onDialogClose" width="800px" align-center :title="$t('PhPrediction.resultTitle')">
        <div class="image-container">
            <img v-if="imageSrc" :src="imageSrc" :alt="$t('PhPrediction.resultTitle')" class="full-image"/>
        </div>
        <template #footer>
          <el-button @click="dialogVisible = false">{{ $t('PhPrediction.closeButton') }}</el-button>
        </template>
      </el-dialog>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { api5000 } from "../../../utils/request";
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

interface Form {
  OM: number | null;
  CL: number | null;
  CEC: number | null;
  H: number | null;
  HN: number | null;
  Al3: number | null;
  AlOx: number | null;
  FeOx: number | null;
  AmFe: number | null;
  initpH: number | null;
}

const form = reactive<Form>({
  OM: null,
  CL: null,
  CEC: null,
  H: null,
  HN: null,
  Al3: null,
  AlOx: null,
  FeOx: null,
  AmFe: null,
  initpH: null,
});

const imageSrc = ref<string | null>(null);
const dialogVisible = ref(false);
const errorMessages = reactive<Record<string, string>>({
  OM: "",
  CL: "",
  CEC: "",
  H: "",
  HN: "",
  Al3: "",
  AlOx: "",
  FeOx: "",
  AmFe: "",
  initpH: "",
});

const handleInput = (field: keyof Form, event: Event, min: number, max: number) => {
  const target = event.target as HTMLInputElement;
  let value = target.value.replace(/[^0-9.]/g, "");
  (form as any)[field] = value ? parseFloat(value) : null;

  if (!value) {
    errorMessages[field] = "";
    return;
  }

  const numValue = parseFloat(value);
  errorMessages[field] = (isNaN(numValue) || numValue < min || numValue > max)
    ? t('PhPrediction.validationRange', { min, max })
    : "";
};

const validateInput = (value: string, min: number, max: number): boolean => {
  const numValue = parseFloat(value);
  return !isNaN(numValue) && numValue >= min && numValue <= max;
};

const onSubmit = async () => {
  const inputConfigs = [
    { field: "OM" as keyof Form, min: 0, max: 35 },
    { field: "CL" as keyof Form, min: 0, max: 10 },
    { field: "CEC" as keyof Form, min: 0, max: 20 },
    { field: "H" as keyof Form, min: 0, max: 1 },
    { field: "HN" as keyof Form, min: 0, max: 30 },
    { field: "Al3" as keyof Form, min: 0, max: 2 },
    { field: "AlOx" as keyof Form, min: 0, max: 2},
    { field: "FeOx" as keyof Form, min: 0, max: 3 },
    { field: "AmFe" as keyof Form, min: 0, max: 1 },
    { field: "initpH" as keyof Form, min: 0, max: 14 },
  ];

  let isValid = true;
  for (const config of inputConfigs) {
    const { field, min, max } = config;
    const value = form[field];
    if (value === null || !validateInput(value.toString(), min, max)) {
      isValid = false;
      errorMessages[field] = t('PhPrediction.validationRange', { min, max });
    } else {
      errorMessages[field] = "";
    }
  }

  if (!isValid) {
    ElMessage.error(t('PhPrediction.validationError'));
    return;
  }

  const features = {
    "OM g/kg": form.OM,
    "CL g/kg": form.CL,
    "CEC cmol/kg": form.CEC,
    "H+ cmol/kg": form.H,
    "HN mg/kg": form.HN,
    "Al3+ cmol/kg": form.Al3,
    "Free alumina g/kg": form.AlOx,                                                              
    "Free iron oxides g/kg": form.FeOx,
    "Amorphous iron g/Kg": form.AmFe,
    "0 day": form.initpH
  };

  const curve =  {                                                                               
      "start_day": 0,                                                                        
      "end_day": 200,                                                                        
      "num_points": 80,                                                                      
      "return_binary": true                                                     
    };           

  try {
    const response = await api5000.post('/api/ph/predict', {
      day: 50,
      features,
      curve
    }, {
      responseType: 'arraybuffer'
    });

    const blob = new Blob([response.data], { type: 'image/png' });
    imageSrc.value = URL.createObjectURL(blob);
    dialogVisible.value = true;
  } catch (error) {
    ElMessage.error(`${t('PhPrediction.requestFailed')}${error}`);
  }
};
const onDialogClose = () => {
  dialogVisible.value = false;
  imageSrc.value = null;
  Object.keys(form).forEach(key => form[key as keyof Form] = null);
  Object.keys(errorMessages).forEach(key => errorMessages[key] = "");
};
</script>

<style scoped>
.box-card {
  max-width: 850px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f0f5ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 25px;
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.el-form-item {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-size: 18px;
  color: #666;
}

.model-info {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
  color: #555;
}

.el-input {
  width: 80%;
}

.onSubmit {
  display: block;
  margin: 0 auto;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.onSubmit:hover {
  background-color: #0056b3;
}

.dialog-class {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 确保容器占满对话框内容区域 */
  font-size: 22px;
}

@media (max-width: 576px) {
  .el-form {
    --el-form-label-width: 100px;
  }
}

.full-image {
  max-width: 100%;
  max-height: 100vh; /* 最大高度不超过视口 */
  width: auto;
  height: auto;
  object-fit: contain; /* 保持比例 */
  border: 2px solid #409eff;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.image-container {
  width: 100%;
  height: 100vh; /* 占满视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto; /* 添加滚动条防止极端情况 */
}

.el-dialog {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.el-dialog__header {
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.el-dialog__body {
  padding: 0 !important;
  overflow: hidden;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .image-container {
    height: auto;
    padding: 10px;
  }
  
  .full-image {
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 40px);
  }
}
</style>