wm/pipIrr.git - Gitblit

// pages/modeCompute/modeCompute.js
const dayjs = require('dayjs');
const { get } = require('../../api/request');
 
import * as echarts from '../../ec-canvas/echarts';
 
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  
  // 将chart实例保存到页面实例中
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  currentPage.chart = chart;
  
  // 确保图表完全初始化后再更新数据
  setTimeout(() => {
    if (currentPage.updateEChartsData && currentPage.data.chartData && currentPage.data.chartData.length > 0) {
      currentPage.updateEChartsData();
    }
  }, 200);
  
  return chart;
}
 
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 显示类型：chart 图表，list 列表
    displayType: 'chart',
    
    // 加载状态
    isLoading: false,
    
    // 农作物相关
    selectedCrop: {},
    cropList: [],
    showCropPopup: false,
    
    // 日期相关
    startDate: '',
    endDate: '',
    showDatePicker: false,
    pickerDate: '',
    currentDateType: '', // 'start' 或 'end'
    
    // 数据相关
    tableData: [],
    chartData: [],
    
    // ECharts相关
    ec: {
      onInit: initChart
    }
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.initDefaultData();
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 图表初始化由ec-canvas组件自动处理
  },
 
  /**
   * 初始化图表（备用方法）
   */
  initChart() {
    // 这个方法主要用于重新初始化图表
    console.log('尝试重新初始化图表');
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 初始化默认数据
   */
  initDefaultData() {
    const today = dayjs();
    const startDate = today.subtract(30, 'day').format('YYYY-MM-DD');
    const endDate = today.format('YYYY-MM-DD');
    
    this.setData({
      startDate: startDate,
      endDate: endDate
    });
    
    // 获取农作物列表
    this.getCropList();
  },
 
  /**
   * 获取农作物列表
   */
  async getCropList() {
    try {
      this.setData({ isLoading: true });
      
      const result = await get({
        url: '/wx/mdVapor/allCropsWithYesterday'
      });
      
      if (result.success && result.content) {
        this.setData({
          cropList: result.content,
          selectedCrop: result.content[0] || {},
          isLoading: false
        });
        
        // 如果有默认选中的农作物，获取数据
        if (result.content.length > 0) {
          this.getCropData();
        }
      } else {
        this.setData({ isLoading: false });
        wx.showToast({
          title: result.msg || '获取农作物列表失败',
          icon: 'none'
        });
      }
    } catch (error) {
      this.setData({ isLoading: false });
      wx.showToast({
        title: '网络请求失败',
        icon: 'none'
      });
      console.error('获取农作物列表失败:', error);
    }
  },
 
  /**
   * 获取作物数据
   */
  async getCropData() {
    if (!this.data.selectedCrop.cropId || !this.data.startDate || !this.data.endDate) {
      console.log('缺少必要参数');
      return;
    }
    
    try {
      this.setData({ isLoading: true });
      
      const result = await get({
        url: '/wx/mdVapor/oneCropsSomeEt0',
        data: {
          cropId: this.data.selectedCrop.cropId,
          timeStart: this.data.startDate,
          timeStop: this.data.endDate
        }
      });
      
      if (result.success && result.content) {
        const tableData = [];
        const chartData = [];
        
        result.content.forEach((item, index) => {
          const tableItem = {
            cropName: item.cropName,
            date: item.dt,
            transpiration: item.et0 ? item.et0.toFixed(2) : '0.00',
            maxTemp: item.maxTmp || 0,
            minTemp: item.minTmp || 0,
            cropCoefficient: item.factor ? item.factor.toFixed(2) : '0.00'
          };
          
          tableData.push(tableItem);
          chartData.push({
            date: item.dt,
            value: item.et0 || 0
          });
        });
        
        this.setData({
          tableData: tableData,
          chartData: chartData,
          isLoading: false
        });
        
        // 如果图表已初始化，更新图表数据
        if (this.chart && this.data.displayType === 'chart') {
          // 延迟更新，确保数据已设置
          setTimeout(() => {
            this.updateEChartsData();
          }, 100);
        }
      } else {
        this.setData({ isLoading: false });
        wx.showToast({
          title: result.msg || '获取作物数据失败',
          icon: 'none'
        });
      }
    } catch (error) {
      this.setData({ isLoading: false });
      wx.showToast({
        title: '网络请求失败',
        icon: 'none'
      });
      console.error('获取作物数据失败:', error);
    }
  },
 
  /**
   * 切换到图表视图
   */
  switchToChart() {
    this.setData({
      displayType: 'chart'
    });
    
    // 延迟更新图表，确保DOM已渲染
    setTimeout(() => {
      if (this.chart) {
        this.updateEChartsData();
      } else {
        console.log('图表实例不存在，尝试重新初始化');
        // 如果图表实例不存在，尝试重新初始化
        this.initChart();
      }
    }, 200);
  },
 
  /**
   * 切换到列表视图
   */
  switchToList() {
    this.setData({
      displayType: 'list'
    });
  },
 
  /**
   * 显示农作物选择弹窗
   */
  showCropPicker() {
    this.setData({
      showCropPopup: true
    });
  },
 
  /**
   * 农作物弹窗显示状态改变
   */
  onCropPopupChange(e) {
    this.setData({
      showCropPopup: e.detail.visible
    });
  },
 
  /**
   * 选择农作物
   */
  selectCrop(e) {
    const crop = e.currentTarget.dataset.crop;
    this.setData({
      selectedCrop: crop,
      showCropPopup: false
    });
    
    // 重新获取数据
    this.getCropData();
  },
 
  /**
   * 显示起始日期选择器
   */
  showStartDatePicker() {
    this.setData({
      showDatePicker: true,
      currentDateType: 'start',
      pickerDate: this.data.startDate || dayjs().format('YYYY-MM-DD')
    });
  },
 
  /**
   * 显示结束日期选择器
   */
  showEndDatePicker() {
    this.setData({
      showDatePicker: true,
      currentDateType: 'end',
      pickerDate: this.data.endDate || dayjs().format('YYYY-MM-DD')
    });
  },
 
  /**
   * 日期改变
   */
  onDateChange(e) {
    // 格式化日期，只保留年月日
    const formattedDate = dayjs(e.detail.value).format('YYYY-MM-DD');
    this.setData({
      pickerDate: formattedDate
    });
  },
 
  /**
   * 取消日期选择
   */
  onDateCancel() {
    this.setData({
      showDatePicker: false
    });
  },
 
  /**
   * 确认日期选择
   */
  onDateConfirm(e) {
    const selectedDate = e.detail.value;
    // 格式化日期，只保留年月日
    const formattedDate = dayjs(selectedDate).format('YYYY-MM-DD');
    
    const updateData = {
      showDatePicker: false
    };
    
    if (this.data.currentDateType === 'start') {
      updateData.startDate = formattedDate;
    } else {
      updateData.endDate = formattedDate;
    }
    
    this.setData(updateData);
    
    // 重新获取数据
    this.getCropData();
  },
 
  /**
   * 更新ECharts图表数据
   */
  updateEChartsData() {
    if (!this.chart) {
      console.log('图表实例不存在，无法更新数据');
      return;
    }
    
    // 处理数据
    const hasData = this.data.chartData && this.data.chartData.length > 0;
    const xAxisData = hasData ? 
      this.data.chartData.map(item => dayjs(item.date).format('MM-DD')) : 
      ['暂无数据'];
    const seriesData = hasData ? 
      this.data.chartData.map(item => item.value) : 
      [0];
 
    const option = {
      backgroundColor: 'transparent',
      grid: {
        left: '10%',
        right: '10%',
        bottom: '15%',
        top: '10%',
        containLabel: true
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#1890FF',
        borderWidth: 1,
        textStyle: {
          color: '#fff',
          fontSize: 14
        },
        formatter: function(params) {
          if (!params || params.length === 0) return '';
          const param = params[0];
          return `${param.axisValue} 蒸腾量: ${param.value} mm/day`;
        }
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLine: {
          lineStyle: { color: '#d0d7de', width: 2 }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        name: '蒸腾量(mm/day)',
        nameTextStyle: {
          color: '#333',
          fontSize: 14
        },
        axisLine: {
          lineStyle: { color: '#d0d7de', width: 2 }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0.05)',
            width: 1
          }
        }
      },
      series: [{
        data: seriesData,
        type: 'line',
        smooth: true,
        symbol: hasData ? 'circle' : 'none',
        symbolSize: 8,
        lineStyle: {
          color: '#1890FF',
          width: 3
        },
        itemStyle: {
          color: '#1890FF',
          borderColor: '#fff',
          borderWidth: 2
        },
        areaStyle: hasData ? {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
              { offset: 1, color: 'rgba(24, 144, 255, 0.05)' }
            ]
          }
        } : null
      }]
    };
    
    this.chart.setOption(option, true);
  },
 
 
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.getCropData();
    wx.stopPullDownRefresh();
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    return {
      title: '模型计算',
      path: '/pages/modeCompute/modeCompute'
    };
  }
})