bigdata_WX/pages/cb/shuifeizsFirst/autoSetting.vue

<template>
  <view class="auto-fertilization-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">自动施肥</text>
      </view>
      <view class="nav-right">
        <text class="nav-icon">⋯</text>
        <text class="nav-icon">⚙️</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 灌溉模式 -->
      <view class="setting-item">
        <text class="setting-label">灌溉模式</text>
        <view class="radio-group">
          <label class="radio-item" :class="{ active: irrigationMode === '定时' }" @click="irrigationMode = '定时'">
            <radio value="定时" :checked="irrigationMode === '定时'" color="#14a478" />
            <text>定时</text>
          </label>
          <label class="radio-item" :class="{ active: irrigationMode === '定量' }" @click="irrigationMode = '定量'">
            <radio value="定量" :checked="irrigationMode === '定量'" color="#14a478" />
            <text>定量</text>
          </label>
          <label class="radio-item" :class="{ active: irrigationMode === '禁用' }" @click="irrigationMode = '禁用'">
            <radio value="禁用" :checked="irrigationMode === '禁用'" color="#14a478" />
            <text>禁用</text>
          </label>
        </view>
      </view>

      <!-- 配方方式 -->
      <view class="setting-item">
        <text class="setting-label">配方方式</text>
        <view class="radio-group">
          <label class="radio-item" :class="{ active: formulaMode === 'PID' }" @click="formulaMode = 'PID'">
            <radio value="PID" :checked="formulaMode === 'PID'" color="#14a478" />
            <text>PID</text>
          </label>
          <label class="radio-item" :class="{ active: formulaMode === '水肥比例' }" @click="formulaMode = '水肥比例'">
            <radio value="水肥比例" :checked="formulaMode === '水肥比例'" color="#14a478" />
            <text>水肥比例</text>
          </label>
          <label class="radio-item" :class="{ active: formulaMode === '禁用' }" @click="formulaMode = '禁用'">
            <radio value="禁用" :checked="formulaMode === '禁用'" color="#14a478" />
            <text>禁用</text>
          </label>
        </view>
      </view>

      <!-- 轮灌次数 -->
      <view class="setting-item">
        <text class="setting-label">轮灌次数</text>
        <view class="number-input">
          <text class="number-btn" @click="decreaseRoundCount">−</text>
          <text class="number-value">{{ roundCount }}</text>
          <text class="number-btn" @click="increaseRoundCount">+</text>
        </view>
      </view>

      <!-- 轮灌间隔 -->
      <view class="setting-item">
        <text class="setting-label">轮灌间隔</text>
        <view class="time-input">
          <input type="number" v-model="roundInterval" class="time-input-field" />
          <text class="time-unit">分钟</text>
        </view>
      </view>

      <!-- 肥前水 -->
      <view class="setting-item">
        <text class="setting-label">肥前水</text>
        <view class="time-input">
          <input type="number" v-model="waterBefore" class="time-input-field" />
          <text class="time-unit">分钟</text>
        </view>
      </view>

      <!-- 肥后水 -->
      <view class="setting-item">
        <text class="setting-label">肥后水</text>
        <view class="time-input">
          <input type="number" v-model="waterAfter" class="time-input-field" />
          <text class="time-unit">分钟</text>
        </view>
      </view>

      <!-- 定时轮灌组 -->
      <view class="round-groups-section">
        <text class="section-title">定时轮灌组</text>
        <view class="round-groups-container">
          <!-- 左侧轮灌组列表 -->
          <view class="round-groups-list">
            <view 
              v-for="i in 7" 
              :key="i"
              class="round-group-item"
              :class="{ active: selectedGroup === i }"
              @click="selectedGroup = i"
            >
              <text>{{ i }}组</text>
            </view>
          </view>

          <!-- 右侧轮灌组详情 -->
          <view class="round-group-detail">
            <!-- 1组 -->
            <view class="group-detail-item" :class="{ active: selectedGroup === 1 }">
              <view class="group-header">
                <text class="group-title">1组</text>
                <text class="group-check" v-if="selectedGroup === 1">✓</text>
              </view>
              <view class="group-settings">
                <view class="setting-row">
                  <text class="setting-row-label">施肥配方</text>
                  <input type="text" placeholder="请输入" class="setting-row-input" />
                </view>
                <view class="setting-row">
                  <text class="setting-row-label">灌溉时长</text>
                  <input type="number" v-model="irrigationTime1" class="setting-row-input" />
                  <text class="setting-row-unit">分钟</text>
                </view>
                <view class="setting-row">
                  <text class="setting-row-label">施肥时长</text>
                  <input type="number" v-model="fertilizationTime1" class="setting-row-input" />
                  <text class="setting-row-unit">分钟</text>
                </view>
              </view>
            </view>

            <!-- 2组 -->
            <view class="group-detail-item" :class="{ active: selectedGroup === 2 }">
              <view class="group-header">
                <text class="group-title">2组</text>
                <text class="group-check" v-if="selectedGroup === 2">✓</text>
              </view>
              <view class="group-settings">
                <view class="setting-row">
                  <text class="setting-row-label">施肥配方</text>
                  <input type="text" placeholder="请输入" class="setting-row-input" />
                </view>
                <view class="setting-row">
                  <text class="setting-row-label">灌溉时长</text>
                  <input type="number" v-model="irrigationTime2" class="setting-row-input" />
                  <text class="setting-row-unit">分钟</text>
                </view>
                <view class="setting-row">
                  <text class="setting-row-label">施肥时长</text>
                  <input type="number" v-model="fertilizationTime2" class="setting-row-input" />
                  <text class="setting-row-unit">分钟</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部确定按钮 -->
    <view class="confirm-btn-container">
      <view class="confirm-btn" @click="confirm">
        <text class="confirm-btn-text">确定</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 灌溉模式
      irrigationMode: '定时',
      // 配方方式
      formulaMode: 'PID',
      // 轮灌次数
      roundCount: 1,
      // 轮灌间隔（分钟）
      roundInterval: 0,
      // 肥前水（分钟）
      waterBefore: 0,
      // 肥后水（分钟）
      waterAfter: 0,
      // 选中的轮灌组
      selectedGroup: 1,
      // 1组设置
      irrigationTime1: 0,
      fertilizationTime1: 0,
      // 2组设置
      irrigationTime2: 0,
      fertilizationTime2: 0
    };
  },
  methods: {
    // 减少轮灌次数
    decreaseRoundCount() {
      if (this.roundCount > 1) {
        this.roundCount--;
      }
    },
    // 增加轮灌次数
    increaseRoundCount() {
      this.roundCount++;
    },
    // 确认按钮点击事件
    confirm() {
      // 这里可以添加确认逻辑
      console.log('确认设置');
    }
  }
};
</script>

<style scoped lang="scss">
.auto-fertilization-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #e6f7f2 0%, #f5f5f5 100%);
  font-family: 'Source Han Sans CN';
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx;
  background: linear-gradient(180deg, #14a478 0%, #0f8a64 100%);
  color: #fff;

  .nav-left {
    .back-icon {
      font-size: 32rpx;
    }
  }

  .nav-center {
    .nav-title {
      font-size: 32rpx;
      font-weight: 500;
    }
  }

  .nav-right {
    display: flex;
    gap: 24rpx;

    .nav-icon {
      font-size: 28rpx;
    }
  }
}

/* 内容区域 */
.content {
  padding: 32rpx;
}

/* 设置项 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #e8e8e8;

  .setting-label {
    font-size: 28rpx;
    color: #042118;
  }

  /* 单选组 */
  .radio-group {
    display: flex;
    gap: 32rpx;

    .radio-item {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 26rpx;
      color: #666;

      &.active {
        color: #14a478;
      }

      radio {
        transform: scale(0.8);
      }
    }
  }

  /* 数字输入 */
  .number-input {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .number-btn {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border-radius: 4rpx;
      font-size: 28rpx;
      color: #666;
    }

    .number-value {
      min-width: 60rpx;
      text-align: center;
      font-size: 26rpx;
      color: #042118;
    }
  }

  /* 时间输入 */
  .time-input {
    display: flex;
    align-items: center;
    gap: 8rpx;

    .time-input-field {
      width: 100rpx;
      height: 52rpx;
      padding: 0 16rpx;
      font-size: 26rpx;
      text-align: center;
      border: 1rpx solid #d9d9d9;
      border-radius: 8rpx;
      color: #042118;
    }

    .time-unit {
      font-size: 24rpx;
      color: #666;
    }
  }
}

/* 轮灌组区域 */
.round-groups-section {
  margin-top: 40rpx;

  .section-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #042118;
    margin-bottom: 24rpx;
  }

  .round-groups-container {
    display: flex;
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    /* 左侧轮灌组列表 */
    .round-groups-list {
      width: 120rpx;
      border-right: 1rpx solid #e8e8e8;

      .round-group-item {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #666;
        border-bottom: 1rpx solid #f0f0f0;

        &.active {
          background: #e6f7f2;
          color: #14a478;
          font-weight: 500;
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    /* 右侧轮灌组详情 */
    .round-group-detail {
      flex: 1;
      padding: 24rpx;

      .group-detail-item {
        display: none;

        &.active {
          display: block;
        }

        .group-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24rpx;

          .group-title {
            font-size: 28rpx;
            font-weight: 500;
            color: #042118;
          }

          .group-check {
            width: 32rpx;
            height: 32rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #14a478;
            color: #fff;
            border-radius: 50%;
            font-size: 20rpx;
          }
        }

        .group-settings {
          .setting-row {
            display: flex;
            align-items: center;
            margin-bottom: 24rpx;

            .setting-row-label {
              width: 120rpx;
              font-size: 26rpx;
              color: #666;
            }

            .setting-row-input {
              flex: 1;
              height: 56rpx;
              padding: 0 16rpx;
              font-size: 26rpx;
              border: 1rpx solid #d9d9d9;
              border-radius: 8rpx;
              color: #042118;
              margin-right: 12rpx;
            }

            .setting-row-unit {
              font-size: 24rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
}

/* 底部确定按钮 */
.confirm-btn-container {
  padding: 32rpx;

  .confirm-btn {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14a478;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(20, 164, 120, 0.3);

    .confirm-btn-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
    }
  }
}
</style>