更新灌溉计划页面，添加项目选择器和总灌溉时间计算功能；优化界面样式，增加SVG图标；修复项目列表和轮灌组显示逻辑；调整配置文件，添加libVersio...

zuoxiao

2025-03-25 fe3ce21a469f7e2584dbcb85cb75022d149f436c

 pages/createIrrigation/createIrrigation.js

@@ -10,213 +10,78 @@
    startTime: '', // 灌溉开始时间
    pickerValue: '', // 时间选择器的值
    timePickerVisible: false, // 时间选择器是否可见
    
    // 项目和轮灌组数据
    // 项目选择器相关
    projectPickerVisible: false,
    projectPickerValue: [],
    selectedProject: null,
    projectOptions: [],
    totalDuration: 0, // 添加总灌溉时间
    // 测试数据
    projectList: [
      {
        id: '1',
        name: '项目一',
        expanded: false, // 是否展开
        totalDuration: 0, // 总时长
        id: 1,
        name: '测试项目一',
        groups: [
          { id: '1-1', name: '轮灌组1', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 }
          {
            id: 101,
            name: '轮灌组A',
            duration: 30,
            selected: false
          },
          {
            id: 102,
            name: '轮灌组B',
            duration: 45,
            selected: false
          },
          {
            id: 103,
            name: '轮灌组C',
            duration: 60,
            selected: false
          }
        ]
      },
      {
        id: '2',
        name: '项目二',
        expanded: false,
        totalDuration: 0,
        id: 2,
        name: '测试项目二',
        groups: [
          { id: '2-1', name: '轮灌组A', selected: false, duration: 0 },
          { id: '2-2', name: '轮灌组B', selected: false, duration: 0 }
          {
            id: 201,
            name: '轮灌组1',
            duration: 40,
            selected: false
          },
          {
            id: 202,
            name: '轮灌组2',
            duration: 50,
            selected: false
          }
        ]
      },
      {
        id: '4',
        name: '项目一',
        expanded: false, // 是否展开
        totalDuration: 0, // 总时长
        id: 3,
        name: '测试项目三',
        groups: [
          { id: '1-1', name: '轮灌组1', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 }
        ]
      },
      {
        id: '5',
        name: '项目一',
        expanded: false, // 是否展开
        totalDuration: 0, // 总时长
        groups: [
          { id: '1-1', name: '轮灌组1', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 }
        ]
      },
      {
        id: '6',
        name: '项目一',
        expanded: false, // 是否展开
        totalDuration: 0, // 总时长
        groups: [
          { id: '1-1', name: '轮灌组1', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 }
        ]
      },
      {
        id: '7',
        name: '项目一',
        expanded: false, // 是否展开
        totalDuration: 0, // 总时长
        groups: [
          { id: '1-1', name: '轮灌组1', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 }
        ]
      },
      {
        id: '8',
        name: '项目8',
        expanded: false, // 是否展开
        totalDuration: 0, // 总时长
        groups: [
          { id: '1-1', name: '轮灌组1', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 },
          { id: '1-2', name: '轮灌组2', selected: false, duration: 0 },
          { id: '1-3', name: '轮灌组3', selected: false, duration: 0 }
        ]
      },
      {
        id: '3',
        name: '项目3',
        expanded: false,
        totalDuration: 0,
        groups: [
          { id: '3-1', name: '轮灌组X', selected: false, duration: 0 },
          { id: '3-2', name: '轮灌组Y', selected: false, duration: 0 },
          { id: '3-3', name: '轮灌组Z', selected: false, duration: 0 }
        ]
      },
      {
        id: '9',
        name: '项目9',
        expanded: false,
        totalDuration: 0,
        groups: [
          { id: '3-1', name: '轮灌组X', selected: false, duration: 0 },
          { id: '3-2', name: '轮灌组Y', selected: false, duration: 0 },
          { id: '3-3', name: '轮灌组Z', selected: false, duration: 0 }
        ]
      }
      ,
      {
        id: '10',
        name: '项目10',
        expanded: false,
        totalDuration: 0,
        groups: [
          { id: '3-1', name: '轮灌组X', selected: false, duration: 0 },
          { id: '3-2', name: '轮灌组Y', selected: false, duration: 0 },
          { id: '3-3', name: '轮灌组Z', selected: false, duration: 0 }
        ]
      }
      ,
      {
        id: '11',
        name: '项目11',
        expanded: false,
        totalDuration: 0,
        groups: [
          { id: '3-1', name: '轮灌组X', selected: false, duration: 0 },
          { id: '3-2', name: '轮灌组Y', selected: false, duration: 0 },
          { id: '3-3', name: '轮灌组Z', selected: false, duration: 0 }
          {
            id: 301,
            name: '东区轮灌组',
            duration: 35,
            selected: false
          },
          {
            id: 302,
            name: '西区轮灌组',
            duration: 55,
            selected: false
          },
          {
            id: 303,
            name: '南区轮灌组',
            duration: 25,
            selected: false
          }
        ]
      }
    ]
@@ -226,8 +91,15 @@
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 页面加载时可以从API获取项目和轮灌组数据
    // this.fetchProjectsAndGroups();
    // 初始化项目选择器选项
    const projectOptions = this.data.projectList.map(project => ({
      label: project.name,
      value: project.id
    }));
    
    this.setData({
      projectOptions: projectOptions // 直接使用一维数组，不需要包装成二维数组
    });
  },

  /**
@@ -267,10 +139,10 @@
   * 时间选择器确认回调
   */
  onTimePickerConfirm: function (e) {
    const { value } = e.detail;
    this.setData({
      startTime: e.detail.formatValue,
      pickerValue: e.detail.value,
      timePickerVisible: false
      timePickerVisible: false,
      startTime: value
    });
  },

@@ -330,26 +202,18 @@
   * 处理时长输入
   */
  onDurationInput: function (e) {
    const projectIndex = e.currentTarget.dataset.projectIndex;
    const groupIndex = e.currentTarget.dataset.groupIndex;
    const value = parseInt(e.detail.value) || 0;
    const { groupIndex } = e.currentTarget.dataset;
    const duration = parseInt(e.detail.value) || 0;
    
    // 更新轮灌组时长
    const durationKey = `projectList[${projectIndex}].groups[${groupIndex}].duration`;
    const selectedProject = { ...this.data.selectedProject };
    selectedProject.groups[groupIndex].duration = duration;
    
    this.setData({
      [durationKey]: value
      selectedProject
    }, () => {
      // 输入时长后重新计算总时间
      this.calculateTotalDuration();
    });
    
    // 自动选中该轮灌组
    const selectedKey = `projectList[${projectIndex}].groups[${groupIndex}].selected`;
    if (value > 0 && !this.data.projectList[projectIndex].groups[groupIndex].selected) {
      this.setData({
        [selectedKey]: true
      });
    }
    
    // 计算并更新项目总时长
    this.updateProjectTotalDuration(projectIndex);
  },

  /**
@@ -376,7 +240,7 @@
  /**
   * 阻止事件冒泡
   */
  stopPropagation: function (e) {
  stopPropagation: function () {
    // 阻止事件冒泡，防止点击输入框时触发父元素的点击事件
  },

@@ -384,155 +248,87 @@
   * 跳转到轮灌组详情页
   */
  navigateToGroupDetail: function (e) {
    const projectIndex = e.currentTarget.dataset.projectIndex;
    const groupIndex = e.currentTarget.dataset.groupIndex;
    const project = this.data.projectList[projectIndex];
    const group = project.groups[groupIndex];
    
    wx.navigateTo({
      url: `/pages/groupDetail/groupDetail?projectId=${project.id}&projectName=${project.name}&groupId=${group.id}&groupName=${group.name}`
    });
    const { groupIndex } = e.currentTarget.dataset;
    // TODO: 实现跳转逻辑
  },

  /**
   * 确认按钮点击事件
   */
  onConfirm: function () {
    // 验证表单
    if (!this.validateForm()) {
      return;
    }
    const { planCode, startTime, selectedProject } = this.data;
    
    // 收集选中的轮灌组
    const selectedGroups = this.getSelectedGroups();
    
    // 构建提交数据
    const formData = {
      planCode: this.data.planCode,
      startTime: this.data.startTime,
      groups: selectedGroups
    };
    
    // 提交数据
    this.submitForm(formData);
  },

  /**
   * 验证表单
   */
  validateForm: function () {
    if (!this.data.planCode) {
    if (!planCode) {
      wx.showToast({
        title: '请输入计划编号',
        icon: 'none'
      });
      return false;
      return;
    }
    
    if (!this.data.startTime) {
    if (!startTime) {
      wx.showToast({
        title: '请选择灌溉开始时间',
        icon: 'none'
      });
      return false;
      return;
    }
    
    const selectedGroups = this.getSelectedGroups();
    if (selectedGroups.length === 0) {
    if (!selectedProject) {
      wx.showToast({
        title: '请至少选择一个轮灌组',
        title: '请选择项目',
        icon: 'none'
      });
      return false;
      return;
    }
    
    // 检查选中的轮灌组是否都设置了时长
    const invalidGroups = selectedGroups.filter(group => !group.duration);
    if (invalidGroups.length > 0) {
      wx.showToast({
        title: '请为所有选中的轮灌组设置时长',
        icon: 'none'
      });
      return false;
    }
    
    return true;

    // TODO: 实现确认逻辑
    console.log('提交数据：', {
      planCode,
      startTime,
      project: selectedProject
    });
  },

  /**
   * 获取选中的轮灌组
   */
  getSelectedGroups: function () {
    const selectedGroups = [];
    
    this.data.projectList.forEach(project => {
      project.groups.forEach(group => {
        if (group.selected) {
          selectedGroups.push({
            projectId: project.id,
            projectName: project.name,
            groupId: group.id,
            groupName: group.name,
            duration: group.duration
          });
        }
      });
  // 显示项目选择器
  showProjectPicker() {
    this.setData({
      projectPickerVisible: true
    });
    
    return selectedGroups;
  },

  /**
   * 提交表单数据
   */
  submitForm: function (formData) {
    // 这里可以添加API请求逻辑，提交表单数据
    console.log('提交的表单数据:', formData);
  // 项目选择器确认
  onProjectPickerConfirm(e) {
    const { value } = e.detail;
    const selectedProject = this.data.projectList.find(project => project.id === value[0]);
    
    // 模拟API请求
    wx.showLoading({
      title: '提交中...',
    this.setData({
      projectPickerVisible: false,
      selectedProject: selectedProject,
      projectPickerValue: value
    }, () => {
      // 选择项目后计算总时间
      this.calculateTotalDuration();
    });
  },

  // 项目选择器取消
  onProjectPickerCancel() {
    this.setData({
      projectPickerVisible: false
    });
  },

  // 计算总灌溉时间
  calculateTotalDuration() {
    if (!this.data.selectedProject) return;
    
    setTimeout(() => {
      wx.hideLoading();
      
      wx.showToast({
        title: '创建成功',
        icon: 'success',
        duration: 2000,
        success: () => {
          // 延迟返回上一页
          setTimeout(() => {
            wx.navigateBack();
          }, 2000);
        }
      });
    }, 1500);
    const totalDuration = this.data.selectedProject.groups.reduce((sum, group) => {
      return sum + (parseInt(group.duration) || 0);
    }, 0);
    
    // 实际API请求示例
    // wx.request({
    //   url: 'your-api-url',
    //   method: 'POST',
    //   data: formData,
    //   success: (res) => {
    //     wx.showToast({
    //       title: '创建成功',
    //       icon: 'success',
    //       duration: 2000,
    //       success: () => {
    //         setTimeout(() => {
    //           wx.navigateBack();
    //         }, 2000);
    //       }
    //     });
    //   },
    //   fail: (err) => {
    //     wx.showToast({
    //       title: '创建失败，请重试',
    //       icon: 'none'
    //     });
    //   }
    // });
  }
    this.setData({
      totalDuration
    });
  },
});