movecar_wx/package-setup/pages/electricity/index.js

// 引入 wx-charts（根据实际路径调整）
const wxCharts = require('../../utils/wxcharts.js');
const api = require('../../../api/index.js');

Page({
  /**
   * 页面的初始数据
   */
  data: {
    currentType: 'day', // 默认按日筛选
    selectedDate: '',   // 选中的日期
    showDate: '',       // 展示的日期文本
    showPicker: false,  // 是否显示日期选择器
    today: '',          // 今日日期
    statData: {         // 统计数据
      chargeTotal: 0,
      dischargeTotal: 0,
      netTotal: 0
    },
    dataList: [],       // 明细数据列表
    listHeader: '时段', // 列表头部文本
    chart: null,         // 图表实例，用于更新图表
    operationRole:wx.getStorageSync('user').operationRole
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取今日日期
    const now = new Date();
    const today = `${now.getFullYear()}-${this.formatNum(now.getMonth() + 1)}-${this.formatNum(now.getDate())}`;
    this.setData({
      today,
      selectedDate: today,
      showDate: this.formatShowDate(today, 'day')
    });
    // 加载初始数据
    this.loadData();
  },

  /**
   * 修复：适配屏幕旋转/尺寸变化，重新渲染图表即可
   */
  onResize() {
    // 直接重新渲染，wxCharts无updateCanvasSize方法
    if (this.data.dataList.length > 0) {
      this.renderChart();
    }
  },

  /**
   * 切换筛选类型（日/月/年）
   */
  changeType(e) {
    const type = e.currentTarget.dataset.type;
    if (type === this.data.currentType) return;
    
    this.setData({
      currentType: type,
      showDate: this.formatShowDate(this.data.selectedDate, type),
      listHeader: type === 'day' ? '时段' : (type === 'month' ? '日期' : '月份')
    });
    this.loadData();
  },

  /**
   * 打开日期选择器
   */
  openDatePicker() {
    this.setData({ showPicker: true });
    setTimeout(() => {
      this.setData({ showPicker: false });
    }, 100);
  },

  /**
   * 日期选择器值改变
   */
  onDateChange(e) {
    const selectedDate = e.detail.value;
    this.setData({
      selectedDate,
      showDate: this.formatShowDate(selectedDate, this.data.currentType)
    });
    this.loadData();
  },

  /**
   * 格式化数字（补零）
   */
  formatNum(num) {
    return num < 10 ? `0${num}` : num;
  },

  /**
   * 格式化展示的日期文本
   */
  formatShowDate(date, type) {
    const [year, month, day] = date.split('-');
    switch (type) {
      case 'day':
        return `${year}-${month}-${day}`;
      case 'month':
        return `${year}-${month}`;
      case 'year':
        return `${year}`;
      default:
        return date;
    }
  },

  /**
   * 加载充放电数据
   */
  loadData() {
    let data = {
      date:this.data.showDate
    }
    api.request(`/sysworkorder/workorderstatistics`, 'post', data, { isPublic: false })       
    .then((data) => {
      if (data.code == 200) {
     console.log(data);
     const { currentType, selectedDate } = this.data;
     const [year, month, day] = selectedDate.split('-');
     
     // 模拟接口请求数据（实际开发中替换为真实接口调用）
    //  let statData = { chargeTotal: 0, dischargeTotal: 0, netTotal: 0 };
     let dataList = [];
 
     // 模拟不同维度的测试数据
     if (currentType === 'day') {
      // 日维度：按小时统计
      // 基础校验：避免数据源不存在或非数组导致报错
      if (this.data.operationRole==5) {
        if (data.data.chargeList && Array.isArray(data.data.chargeList)) {
          for (let index = 0; index < data.data.chargeList.length; index++) {
            // 获取当前行数据
            const item = data.data.chargeList[index];
            
            // 关键修复：先初始化数组元素，再赋值（解决空数组直接赋值报错）
            dataList[index] = { ...item }; // 保留原始数据字段
            console.log(dataList);
            // 保留你的核心逻辑：仅截取小时位相减
            // 增加防错处理：避免时间字段为空/格式错误导致NaN
            const startHour = data.data.chargeList[index].startworkordertime?.slice(11, 16) || 0;
            const endHour = data.data.chargeList[index].endworkordertime?.slice(11, 16) || 0;
            dataList[index].time = `${endHour +'-'+ startHour}`;
          }
        }
      }else{
        if (data?.data?.dischargeList && Array.isArray(data.data.dischargeList)) {
          for (let index = 0; index < data.data.dischargeList.length; index++) {
            // 获取当前行数据
            const item = data.data.dischargeList[index];
            
            // 关键修复：先初始化数组元素，再赋值（解决空数组直接赋值报错）
            dataList[index] = { ...item }; // 保留原始数据字段
            console.log(dataList);
            // 保留你的核心逻辑：仅截取小时位相减
            // 增加防错处理：避免时间字段为空/格式错误导致NaN
            const startHour = data.data.dischargeList[index].startworkordertime?.slice(11, 16) || 0;
            const endHour = data.data.dischargeList[index].endworkordertime?.slice(11, 16) || 0;
            dataList[index].time = `${endHour +'-'+ startHour}`;
          }
        }
      }
    
     } else if (currentType === 'month') {
       // 月维度：按日期统计
      if (this.data.operationRole==5) {

       if (data?.data?.chargeList && Array.isArray(data.data.chargeList)) {
        for (let index = 0; index < data.data.chargeList.length; index++) {
          // 获取当前行数据
          const item = data.data.chargeList[index];
          
          // 关键修复：先初始化数组元素，再赋值（解决空数组直接赋值报错）
          dataList[index] = { ...item }; // 保留原始数据字段
          console.log(dataList);
          // 保留你的核心逻辑：仅截取小时位相减
          // 增加防错处理：避免时间字段为空/格式错误导致NaN
          const startHour = data.data.chargeList[index].startworkordertime?.slice(8, 10) || 0;
          dataList[index].time = startHour;
        }
      }
    }else{
      if (data?.data?.dischargeList && Array.isArray(data.data.dischargeList)) {
        for (let index = 0; index < data.data.dischargeList.length; index++) {
          // 获取当前行数据
          const item = data.data.dischargeList[index];
          
          // 关键修复：先初始化数组元素，再赋值（解决空数组直接赋值报错）
          dataList[index] = { ...item }; // 保留原始数据字段
          console.log(dataList);
          // 保留你的核心逻辑：仅截取小时位相减
          // 增加防错处理：避免时间字段为空/格式错误导致NaN
          const startHour = data.data.dischargeList[index].startworkordertime?.slice(8, 10) || 0;
          dataList[index].time = startHour;
        }
      }
    }
     } else if (currentType === 'year') {
       // 年维度：按月份统计
      if (this.data.operationRole==5) {

        if (data?.data?.chargeList && Array.isArray(data.data.chargeList)) {
         for (let index = 0; index < data.data.chargeList.length; index++) {
           // 获取当前行数据
           const item = data.data.chargeList[index];
           
           // 关键修复：先初始化数组元素，再赋值（解决空数组直接赋值报错）
           dataList[index] = { ...item }; // 保留原始数据字段
           console.log(dataList);
           // 保留你的核心逻辑：仅截取小时位相减
           // 增加防错处理：避免时间字段为空/格式错误导致NaN
           const startHour = data.data.chargeList[index].startworkordertime?.slice(5, 7) || 0;
           dataList[index].time = startHour;
         }
       }
     }else{
       if (data?.data?.dischargeList && Array.isArray(data.data.dischargeList)) {
         for (let index = 0; index < data.data.dischargeList.length; index++) {
           // 获取当前行数据
           const item = data.data.dischargeList[index];
           
           // 关键修复：先初始化数组元素，再赋值（解决空数组直接赋值报错）
           dataList[index] = { ...item }; // 保留原始数据字段
           console.log(dataList);
           // 保留你的核心逻辑：仅截取小时位相减
           // 增加防错处理：避免时间字段为空/格式错误导致NaN
           const startHour = data.data.dischargeList[index].startworkordertime?.slice(5, 7) || 0;
           dataList[index].time = startHour;
         }
       }
     }
     }
 
     // 计算总计数据
    //  dataList.forEach(item => {
    //    statData.chargeTotal += item.charge;
    //    statData.dischargeTotal += item.discharge;
    //  });
    //  statData.netTotal = (statData.chargeTotal - statData.dischargeTotal).toFixed(1);
    //  statData.chargeTotal = statData.chargeTotal.toFixed(1);
    //  statData.dischargeTotal = statData.dischargeTotal.toFixed(1);
 
     this.setData({
       statData:data.data,
       dataList
     });
 
     // 渲染折线图
     this.renderChart();
     this.setData({
      statData: data.data

     })
      }
    })
    .catch((err) => {
      console.error('获取工单信息失败：', err);
      this.showInfo('获取工单信息失败');
    });
    
   
  },

  /**
   * ✅ 修复完成：渲染充放电折线图 (所有错误已修正)
   */
  renderChart() {
    const { dataList } = this.data;
    if (dataList.length === 0) return;

    // 提取X轴标签和Y轴数据
    const categories = dataList.map(item => item.time);
    let chargeData = ''
    if(this.data.operationRole==5){
       chargeData = dataList.map(item => parseFloat(item.chargeActual));

    }else{
       chargeData = dataList.map(item => parseFloat(item.dischargeActual));

    }
    // const dischargeData = dataList.map(item => parseFloat(item.dischargeActual));

    // ✅ 修复：获取屏幕宽度 - 正确的PX适配，不乘以pixelRatio
    const systemInfo = wx.getSystemInfoSync();
    const windowWidth = systemInfo.windowWidth;
    // 图表宽度：屏幕宽度 - 左右各16px边距，完美适配所有机型
    const chartWidth = windowWidth - 32;
    // 图表高度：固定280px，适配性最佳
    const chartHeight = 200;

    // ✅ 修复：wxCharts 标准正确配置项（删除所有无效配置，修正错误配置）
    const chartConfig = {
      canvasId: 'chargeDischargeChart', // 必须和wxml的canvas-id一致 ✔️
      type: 'line', // 折线图类型 ✔️
      categories: categories, // X轴分类 ✔️
      // ['1','2','3','4','5','6']
      // ========== 新增：图表顶部标题配置【核心代码】 ==========
      series: [
        {
          name: '充电量(kWh)',
          data: chargeData,
          color: '#07c160' // 绿色充电
        }
        // {
        //   name: '放电量(kWh)',
        //   data: dischargeData,
        //   color: '#ff4757' // 红色放电
        // }
      ],
      // ✅ 正确的Y轴配置项
      yAxis: {
         
        min: 0, // Y轴最小值为0 ✔️
        format: (val) => val.toFixed(1), // Y轴数值保留1位小数 ✔️
        titleFontSize: 12, // Y轴标题字号
        labelFontSize: 10, // Y轴刻度字号 ✔️
        fontColor: '#666', // Y轴文字颜色
        gridColor: '#eee' // Y轴网格线颜色
      },
      // ✅ 正确的X轴配置项
      xAxis: {
        disableGrid: false, // 显示X轴网格线 ✔️
        labelFontSize: 10, // X轴刻度字号 ✔️
        fontColor: '#666',
        gridColor: '#eee'
      },
      legend: false, // 是否显示图例 (wxCharts中是布尔值，不是对象) ✔️
      width: chartWidth, // ✅ 核心修复：正确的宽度PX值
      height: 240, // ✅ 微调高度：从280改为300，给顶部标题留出空间，不挤压图表内容
      dataLabel: false, // 是否在折线上显示数值 ✔️
      dataPointShape: true, // 是否显示数据点 ✔️
      fontColor: '#666',
      // ✅ 修复：wxCharts 正确的折线样式配置
      extra: {
        line: {
          type: 'curve', // curve=曲线，straight=直线 ✔️
          width: 1 // 折线粗细
        },
        legendTextColor: '#666' // 图例文字颜色
      }
    };

    // ✅ 修复：wxCharts无updateData，更新图表的正确方式 = 重新实例化
    // ✅ 修复：用setData赋值图表实例，不是直接修改this.data
    const chart = new wxCharts(chartConfig);
    this.setData({ chart });
  }
});