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: {
      top: 'bottom',
    },
    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) {
    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) {
    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().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        ETime: moment().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 = plan.frequency.split('/')[0];
      //   let record = [...patrolRecord];
      //   switch (unit) {
      //     case '周':
      //       record = patrolRecord.filter(r => moment(r.inspectionTime).isSame(this.day, 'day'));
      //       break;
      //     case '天':
      //       record = patrolRecord.filter(r => moment(r.inspectionTime).isSame(this.day, 'day'));
      //       break;
      //     default:
      //       break;
      //   }
      // })

      this.initAlreadyChart(inspectedPoints)
      this.setData({
        dayIssues: nextDayIssues,
        inspectedCount: inspectedPoints.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0),

      })
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.setNavigationBarTitle({ title: options.day })
    this.day = options.day;
    this.subType = options.subType;
    this.getData();
    setTimeout(() => {
      this.initNeedChart([
        { value: 1048, name: '点位1' },
        { value: 735, name: '点位2' },
        { value: 580, name: '点位3' },
        { value: 580, name: '点位4' },
        { value: 580, name: '点位5' },
      ])
    }, 1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.needEcComponent = this.selectComponent('#need-chart-dom');
    this.alreadyEcComponent = this.selectComponent('#already-chart-dom');
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})