Inspection/weapp/package/subSystem/dayPatrolInfo/dayPatrolInfo.js

// package/subSystem/dayPatrolInfo/dayPatrolInfo.js
import * as echarts from '../../components/ec-canvas/echarts';
import { getSubSystemPatrol, getSubSystemPatrolAbout } from "../../../utils/getApiUrl";
import { Request } from "../../../common";
import moment from '../../../utils/moment';

const setPieOptions = ((chart, data) => {
  const option = {
    grid: {
      top: '0%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'scroll',
      bottom: 0,
    },
    series: [
      {
        type: 'pie',
        radius: ['30%', '55%'],
        // avoidLabelOverlap: false,
        emphasis: {
          label: {
            show: true,
            fontWeight: 'bold'
          }
        },
        data: data
      }
    ]
  };
  chart.setOption(option);
})

Page({

  /**
   * 页面的初始数据
   */
  data: {
    needEc: { lazyLoad: true },
    alreadyEc: { lazyLoad: true },
    dayIssues: [], // 今日问题分布
    needInspectCount: 0, // 今日待检总次数
    inspectedCount: 0, // 今日已检总次数
  },

  // 今日待检分布图表
  initNeedChart: function (data) {
      if(this.needEcComponent){
        this.needEcComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr
            });
            setPieOptions(chart, data)
            return chart;
          });
      }
   
  },

  // 今日已检分布图表
  initAlreadyChart: function (data) {
      if( this.alreadyEcComponent){
        this.alreadyEcComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr
            });
            setPieOptions(chart, data)
            return chart;
          });
      }
  
  },

  getData() {
    const promiseArr = [
      Request.get(getSubSystemPatrol(this.day, this.subType)),
      Request.get(getSubSystemPatrolAbout({
        STime: moment(this.day).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        ETime: moment(this.day).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
        keywords: this.subType,
      })),
    ]
    Promise.all(promiseArr).then(([subSystemPatrol, patrolRecord]) => {
      let dayRecord = patrolRecord.filter(r => moment(r.inspectionTime).isSame(this.day, 'day')); // 今日巡检记录
      let dayAlarmRecord = dayRecord.filter(r => r.alarm); // 今日异常记录

      // 今日问题分布
      let nextDayIssues = [];
      const colors = ['#1684FF', '#DF6F6F', '#DF9B6F', '#DFBC6F'];
      dayAlarmRecord.forEach((record, index) => {
        const dayIndex = nextDayIssues.findIndex(d => d.pointName === record.points.itemData.name);
        if (dayIndex === -1) {
          nextDayIssues.push({
            pointName: record.points.itemData.name,
            count: 1,
            color: colors[index % colors.length],
          });
        } else {
          nextDayIssues[dayIndex].count += 1;
        }
      });
      const total = nextDayIssues.reduce((accumulator, currentValue) => accumulator + currentValue.count, 0);
      nextDayIssues = nextDayIssues.map(d => ({ ...d, percent: Math.round((d.count / total) * 100) }));

      // 今日已巡分布
      let inspectedPoints = [];
      dayRecord.forEach((record) => {
        const dayIndex = inspectedPoints.findIndex(d => d.name === record.points.itemData.name);
        if (dayIndex === -1) {
          inspectedPoints.push({
            name: record.points.itemData.name,
            value: 1,
          });
        } else {
          inspectedPoints[dayIndex].value += 1;
        }
      })
      this.inspectedPoints = inspectedPoints;

      // 今日待检分布
      let needInspectPoints = [];
      subSystemPatrol.dayPatrolPlan.forEach((plan) => {
        const unit = plan.frequency.split('/')[1];
        const frequency = Number(plan.frequency.split('次')[0]);
        let record = patrolRecord.filter(r =>
          moment(r.inspectionTime).isBefore(moment(this.day).endOf('day')) // 当前选定日期及之前的巡检记录
          && r.patrolPlanId === plan.id // 关联当前计划的记录
        );
        switch (unit) {
          case '月':
            record = record.filter(r => moment(r.inspectionTime).isSame(this.day, 'month '));
            break;
          case '周':
            record = record.filter(r => moment(r.inspectionTime).isSame(this.day, 'isoWeek'));
            break;
          case '天':
            record = record.filter(r => moment(r.inspectionTime).isSame(this.day, 'day'));
            break;
          default:
            break;
        }
        plan.points.forEach(p => {
          const index = needInspectPoints.findIndex(n => n.name === p.name)
          if (index === -1) {
            needInspectPoints.push({ name: p.name, value: frequency });
          } else {
            needInspectPoints[index].value += frequency;
          }
        })
        record.forEach(r => {
          const index = needInspectPoints.findIndex(n => n.name === r.points.itemData.name);
          if (index !== -1 && needInspectPoints[index].value > 0) {
            needInspectPoints[index].value -= 1;
          }
        })
      })

      
      this.setData({
        dayIssues: nextDayIssues,
        needInspectCount: needInspectPoints.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0),
        inspectedCount: inspectedPoints.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0),
      },()=>{
          //需要在节点挂载后才能拿到！！！！！所以写在setData回调中
        this.needEcComponent = this.selectComponent('#need-chart-dom');
        this.alreadyEcComponent = this.selectComponent('#already-chart-dom');
            this.initNeedChart(needInspectPoints)
            this.initAlreadyChart(inspectedPoints)
      })
    
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.setNavigationBarTitle({ title: options.day })
    this.day = options.day;
    this.subType = options.subType;
    this.getData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})