shuichacha/shuichacha-for-KL/pages/realtimewater/realtimewater.js

// pages/realtimewater.js
import * as echarts from '../../components/ec-canvas/echarts.js';
import {
  barChartOptions,
  lineChartOptions
} from '../../utils/chart.js';
let moment = require('../../utils/moment.js');
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentYear: moment().year(),
    ec: {
      lazyLoad: true,
    },
    list: [{
      label: '累计用水量',
      useVolume: 0
    }, {
      label: '平均用水量',
      useVolume: 0
    }, {
      label: '最高用水量',
      useVolume: 0
    }, {
      label: '最低用水量',
      useVolume: 0
    }],
  },
  // 初始化echart图表
  initChart({
    id,
    type,
    data,
    color
  }) {
    const {
      legend = [], xAxis = [], series = []
    } = data;
    const setOption = () => {
      if (type == 'bar') {
        this[id].setOption(barChartOptions({
          legend,
          xAxis,
          series
        }, color), true);
      } else {
        this[id].setOption(lineChartOptions({
          legend,
          xAxis,
          series
        }, color), true);
      }
    }
    if (this[id]) {
      setOption();
      return
    }
    this.selectComponent(`#${id}`).init((canvas, width, height) => {
      this[id] = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(this[id]);
      setOption();
      return this[id];
    });
  },
  getThirtyDaysUseWater() {
    app.$http.get('/statistics/getThirtyDaysUseWater').then(({
      status,
      data = {}
    }) => {
      if (status == 0) {
        const {
          totalUseVolume = 0, averageUseVolume = 0, maxUseWater = {}, minUseWater = {}
        } = data;
        this.setData({
          'list[0].useVolume': totalUseVolume,
          'list[1].useVolume': averageUseVolume,
          'list[2].useVolume': maxUseWater.useVolume || 0,
          'list[3].useVolume': minUseWater.useVolume || 0,
        })
      }
    })
  },
  getWater() {
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    app.$http.get('/statistics/getRealTimeUseWater', {
      period: 30
    }).then(({
      status,
      msg,
      data
    }) => {
      if (status === 0) {
        data = data.sort(function (a, b) {
          return a.date - b.date
        })
        const legend = ['用水量'],
          xAxis = [],
          series = [
            []
          ];
        if (data.length) {
          data.forEach(v => {
            let date = v.date.toString();
            date = date.substr(4, 2) + '.' + date.substr(6, 2);
            xAxis.push(date);
            series[0].push(v.useVolume);
          })
          const option = {
            id: 'monthChart',
            type: 'line',
            data: {
              legend,
              series,
              xAxis
            },
            color: ['#4386DE']
          }
          this.initChart(option);
        }
      }
      wx.hideLoading();
    }).catch(() => {
      wx.hideLoading();
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    setTimeout(() => {
      this.getWater();
      this.getThirtyDaysUseWater();
    }, 300);
  },
})