soilgd12/src/views/User/HmOutFlux/irrigationWater/irriWaterInputFlux.vue

<template>
  <div class="container">
    <el-card shadow="always" class="gradient-card">
      <!-- 标题区域 -->
      <div class="title-section">
        <h1 class="main-title">灌溉水输入通量计算</h1>
        <p class="sub-title">请选择土地类型并输入相应的灌溉参数</p>
      </div>
      
      <!-- 水地参数输入 -->
      <div class="land-section">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-checkbox v-model="waterLand" label="水地" class="land-checkbox" />
          </el-col>
          <el-col :span="9">
            <div class="input-label">
              <i class="fas fa-faucet"></i> 灌溉水用量 (m³)
            </div>
            <el-input
              v-model="irrigationWaterUsage"
              placeholder="请输入灌溉水用量"
              :disabled="!waterLand"
              size="large"
            />
          </el-col>
          <el-col :span="9">
            <div class="input-label">
              <i class="fas fa-percentage"></i> 有效利用率 (%)
            </div>
            <el-input
              v-model="irrigationEfficiency"
              placeholder="请输入有效利用率"
              :disabled="!waterLand"
              size="large"
            />
          </el-col>
        </el-row>
      </div>

      <!-- 水浇地参数输入 -->
      <div class="land-section">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-checkbox v-model="irrigatedLand" label="水浇地" class="land-checkbox" />
          </el-col>
          <el-col :span="9">
            <div class="input-label">
              <i class="fas fa-faucet"></i> 灌溉水用量 (m³)
            </div>
            <el-input
              v-model="irrigatedWaterUsage"
              placeholder="请输入灌溉水用量"
              :disabled="!irrigatedLand"
              size="large"
            />
          </el-col>
          <el-col :span="9">
            <div class="input-label">
              <i class="fas fa-percentage"></i> 有效利用率 (%)
            </div>
            <el-input
              v-model="irrigatedEfficiency"
              placeholder="请输入有效利用率"
              :disabled="!irrigatedLand"
              size="large"
            />
          </el-col>
        </el-row>
      </div>

      <!-- 旱地参数输入 -->
      <div class="land-section">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-checkbox v-model="dryLand" label="旱地" class="land-checkbox" />
          </el-col>
          <el-col :span="9">
            <div class="input-label">
              <i class="fas fa-faucet"></i> 灌溉水用量 (m³)
            </div>
            <el-input
              v-model="dryWaterUsage"
              placeholder="请输入灌溉水用量"
              :disabled="!dryLand"
              size="large"
            />
          </el-col>
          <el-col :span="9">
            <div class="input-label">
              <i class="fas fa-percentage"></i> 有效利用率 (%)
            </div>
            <el-input
              v-model="dryEfficiency"
              placeholder="请输入有效利用率"
              :disabled="!dryLand"
              size="large"
            />
          </el-col>
        </el-row>
      </div>

      <!-- 计算按钮 -->
      <el-row justify="center" class="button-section">
        <el-button
          class="calculate-btn"
          @click="calculateFlux"
        >
          <i class="fas fa-calculator"></i> 计算灌溉水输入通量
        </el-button>
      </el-row>

      <!-- 计算结果 -->
      <div v-if="fluxResult !== null" class="result-section">
        <div class="result-title">
          <i class="fas fa-chart-bar"></i> 计算结果
        </div>
        <div class="flux-value">{{ fluxResult.toFixed(2) }} <span class="unit">m³</span></div>
        <p class="result-description">灌溉水输入通量计算结果</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElCheckbox, ElInput, ElButton, ElMessage, ElCard, ElRow, ElCol } from 'element-plus';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faFaucet, faPercentage, faCalculator, faChartBar } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(faFaucet, faPercentage, faCalculator, faChartBar);

export default {
  components: {
    ElCheckbox,
    ElInput,
    ElButton,
    ElMessage,
    ElCard,
    ElRow,
    ElCol,
    FontAwesomeIcon
  },
  setup() {
    const waterLand = ref(false);
    const irrigatedLand = ref(false);
    const dryLand = ref(false);

    const irrigationWaterUsage = ref('');
    const irrigationEfficiency = ref('');

    const irrigatedWaterUsage = ref('');
    const irrigatedEfficiency = ref('');

    const dryWaterUsage = ref('');
    const dryEfficiency = ref('');

    const fluxResult = ref(null);

    const calculateFlux = () => {
      let totalFlux = 0;
      let valid = true;

      if (waterLand.value) {
        if (!irrigationWaterUsage.value || !irrigationEfficiency.value) {
          ElMessage.warning('请输入水地的灌溉水用量和灌溉水有效利用率');
          valid = false;
        } else {
          const usage = parseFloat(irrigationWaterUsage.value);
          const efficiency = parseFloat(irrigationEfficiency.value) / 100; // 转换为小数

          if (isNaN(usage) || isNaN(efficiency)) {
            ElMessage.error('请输入有效的数字');
            valid = false;
          } else if (efficiency > 1 || efficiency < 0) {
            ElMessage.error('有效利用率应在0-100%之间');
            valid = false;
          } else {
            totalFlux += usage * efficiency;
          }
        }
      }

      if (irrigatedLand.value) {
        if (!irrigatedWaterUsage.value || !irrigatedEfficiency.value) {
          ElMessage.warning('请输入水浇地的灌溉水用量和灌溉水有效利用率');
          valid = false;
        } else {
          const usage = parseFloat(irrigatedWaterUsage.value);
          const efficiency = parseFloat(irrigatedEfficiency.value) / 100;

          if (isNaN(usage) || isNaN(efficiency)) {
            ElMessage.error('请输入有效的数字');
            valid = false;
          } else if (efficiency > 1 || efficiency < 0) {
            ElMessage.error('有效利用率应在0-100%之间');
            valid = false;
          } else {
            totalFlux += usage * efficiency;
          }
        }
      }

      if (dryLand.value) {
        if (!dryWaterUsage.value || !dryEfficiency.value) {
          ElMessage.warning('请输入旱地的灌溉水用量和灌溉水有效利用率');
          valid = false;
        } else {
          const usage = parseFloat(dryWaterUsage.value);
          const efficiency = parseFloat(dryEfficiency.value) / 100;

          if (isNaN(usage) || isNaN(efficiency)) {
            ElMessage.error('请输入有效的数字');
            valid = false;
          } else if (efficiency > 1 || efficiency < 0) {
            ElMessage.error('有效利用率应在0-100%之间');
            valid = false;
          } else {
            totalFlux += usage * efficiency;
          }
        }
      }

      if (valid) {
        fluxResult.value = totalFlux;
        ElMessage.success(`灌溉水输入通量为: ${totalFlux.toFixed(2)} m³`);
      }
    };

    return {
      waterLand,
      irrigatedLand,
      dryLand,

      irrigationWaterUsage,
      irrigationEfficiency,

      irrigatedWaterUsage,
      irrigatedEfficiency,

      dryWaterUsage,
      dryEfficiency,

      calculateFlux,
      fluxResult
    };
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.gradient-card {
  background: linear-gradient(90deg, rgba(250, 253, 255, 0.7) 0%, rgba(137, 223, 252, 0.7) 90%);
  padding: 40px;
  border: none;
  width: 90%;
  max-width: 900px;
  border-radius: 20px;
}

.title-section {
  text-align: center;
  margin-bottom: 40px;
}

.main-title {
  font-size: 2.5rem;
  color: #1a3c7a;
  margin-bottom: 15px;
  font-weight: 700;
}

.sub-title {
  font-size: 1.4rem;
  color: #555;
}

.land-section {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.land-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.land-checkbox {
  height: 100%;
  display: flex;
  align-items: center;
}

.land-checkbox :deep(.el-checkbox__label) {
  font-size: 1.6rem;
  font-weight: 600;
  color: #1a3c7a;
}

.land-checkbox :deep(.el-checkbox__inner) {
  width: 24px;
  height: 24px;
}

.land-checkbox :deep(.el-checkbox__inner::after) {
  height: 12px;
  left: 7px;
  width: 6px;
}

.input-label {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 12px;
}

:deep(.el-input) .el-input__inner {
  height: 60px;
  font-size: 1.5rem;
  border-radius: 10px;
  padding: 0 20px;
  border: 2px solid #dcdfe6;
  transition: all 0.3s ease;
}

:deep(.el-input) .el-input__inner:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

:deep(.el-input) .el-input__inner:disabled {
  background-color: #f5f7fa;
  opacity: 0.7;
}

.button-section {
  margin: 40px 0 30px;
}

.calculate-btn {
  width: 100%;
  max-width: 500px;
  height: 70px;
  border: none;
  border-radius: 35px;
  font-size: 1.8rem;
  font-weight: bold;
  transition: all 0.4s ease;
  background: linear-gradient(45deg, #1a8cff, #00cc99);
  color: white;
  box-shadow: 0 6px 15px rgba(26, 140, 255, 0.4);
}

.calculate-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(26, 140, 255, 0.5);
  background: linear-gradient(45deg, #0d7de0, #00b386);
}

.calculate-btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(26, 140, 255, 0.4);
}

.result-section {
  text-align: center;
  margin-top: 30px;
  padding: 30px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: 2px solid #e0f7fa;
}

.result-title {
  font-size: 1.8rem;
  color: #1a3c7a;
  margin-bottom: 25px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.flux-value {
  font-size: 3.5rem;
  font-weight: 800;
  color: #e91e63;
  margin: 10px 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.unit {
  font-size: 2rem;
  color: #555;
  font-weight: 600;
  margin-left: 10px;
}

.result-description {
  font-size: 1.4rem;
  color: #555;
  margin-top: 15px;
}
</style>