iep-ui/es/pollute-calendar/PolluteCalendar.js

An enterprise-class UI design language and Vue-based implementation

import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import Moment from 'moment';
import { extendMoment } from 'moment-range';
import { cloneDeep, countBy, groupBy, isEmpty } from 'lodash';
import toolkits from '../toolkits';
import Tooltip from '../tooltip';
import PolluteTooltip from './PolluteTooltip';
import isNil from 'lodash/isNil';

var moment = extendMoment(Moment);
var nowYear = parseInt(Moment().format('YYYY'));
var enumMonth = {
  1: [0, 0, 0, 0, 0, 0],
  2: [0, 0, 0, 0, 0, 0],
  3: [0, 0, 0, 0, 0, 0],
  4: [0, 0, 0, 0, 0, 0],
  5: [0, 0, 0, 0, 0, 0],
  6: [0, 0, 0, 0, 0, 0],
  7: [0, 0, 0, 0, 0, 0],
  8: [0, 0, 0, 0, 0, 0],
  9: [0, 0, 0, 0, 0, 0],
  10: [0, 0, 0, 0, 0, 0],
  11: [0, 0, 0, 0, 0, 0],
  12: [0, 0, 0, 0, 0, 0]
};

export default {
  name: 'APolluteCalendar',
  props: {
    year: PropTypes.number.def(nowYear),
    data: PropTypes.array,
    factor: PropTypes.string,
    factorList: PropTypes.array.def([]), // zxw新加 因子列表
    mode: PropTypes.string.def('air'),
    type: PropTypes.string.def('hour') //默认是小时对应的色值   传 day  是去24小时数据色值
  },
  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      itemScale: 0,
      months: undefined,
      enumMonth: cloneDeep(enumMonth),
      polluteLevel: ['优', '良', '轻度', '中度', '重度', '严重'],
      aqiColor: Object.keys(toolkits.pollutionFactors.factorDict.factor.aqi.degreeMap),
      formatValueToColor: toolkits.pollutionFactors.formatValueToColor,
      formatValueToFontColor: toolkits.pollutionFactors.formatValueToFontColor,
      waterColor: Object.keys(toolkits.waterLevel.waterDict.colorBaseForValue),
      formatData: {}
    };
  },

  computed: {
    factorLists: function factorLists() {
      if (this.factorList.length) return this.factorList;else {
        if (this.mode === 'air') {
          return ['aqi', 'pm25', 'pm10', 'so2', 'no2', 'co', 'o3'];
        } else {
          return ['waterLevel', 'ph', 'cod', 'nh3n', 'tp', 'tn', 'dissolvedOxygen'];
        }
      }
    },
    structureData: function structureData() {
      var _$props = this.$props,
          year = _$props.year,
          data = _$props.data,
          factor = _$props.factor;

      return {
        year: year,
        data: data,
        factor: factor
      };
    }
  },
  watch: {
    structureData: {
      handler: function handler(val) {
        var _this = this;

        this.months = undefined;
        this.formatData = {};
        this.enumMonth = cloneDeep(enumMonth);
        if (!isEmpty(val.data) && !isNil(val.year)) {
          val.data.forEach(function (item) {
            _this.formatData[moment(item.time).startOf('days').format('x')] = item;
          });
          this.calc12Month();
          this.formatRight(val.data);
        }
      },

      immediate: true
    }
  },
  methods: {
    calc12Month: function calc12Month() {
      var _this2 = this;

      this.months = Object.keys(this.enumMonth).map(function (item) {
        var start = Moment(Moment().format(_this2.$props.year + '-' + item + '-01'));
        var result = _this2.getMonthRange(start.format('YYYY-MM-DD'), start.endOf('months').format('YYYY-MM-DD'));
        return _extends({
          month: item + '\u6708'
        }, result);
      });
    },
    getMonthRange: function getMonthRange(start, end) {
      var range = moment.range(start, end);
      var originalMonths = Array.from(range.by('days'));
      return {
        originalMonths: originalMonths,
        formatMonths: originalMonths.map(function (item) {
          return {
            y: item.format('YYYY'),
            m: item.format('M'),
            d: item.format('D'),
            date: item.format('YYYY-MM-DD'),
            timestamp: item.format('x')
          };
        })
      };
    },
    timeDiff: function timeDiff(val) {
      return !isEmpty(this.formatData[moment(val).format('x')]);
    },
    formatRight: function formatRight(e) {
      var _this3 = this;

      var _$props2 = this.$props,
          factor = _$props2.factor,
          year = _$props2.year,
          mode = _$props2.mode;

      var structureData = groupBy(e, function (item) {
        return Moment(item.time).format('M');
      });
      var monthsData = {};
      Object.entries(structureData).forEach(function (item) {
        if (!isEmpty(_this3.enumMonth[item[0]])) {
          monthsData[item[0]] = item[1].map(function (f) {
            if (f.hasOwnProperty('time')) {
              if (parseInt(moment(f.time).format('YYYY')) === year) {
                return (mode === 'air' ? _this3.formatValueToColor(f[factor], factor) : toolkits.waterLevel.formatWaterValueToColor(f[factor], factor)).replace('#', '');
              } else {
                return '#8a97a0';
              }
            } else {
              return '#8a97a0';
            }
          }).map(function (item) {
            var colorList = mode === 'air' ? _this3.aqiColor : _this3.waterColor;
            if (colorList[0] === item) {
              return 0;
            } else if (colorList[1] === item) {
              return 1;
            } else if (colorList[2] === item) {
              return 2;
            } else if (colorList[3] === item) {
              return 3;
            } else if (colorList[4] === item) {
              return 4;
            } else if (colorList[5] === item) {
              return 5;
            }
          });
        }
      });
      Object.entries(monthsData).forEach(function (item) {
        if (_this3.enumMonth[item[0]]) {
          _this3.enumMonth[item[0]] = countBy(!isEmpty(item[1]) ? item[1] : 0, Number);
        }
      });
    }
  },
  render: function render() {
    var _this4 = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $props = this.$props,
        months = this.months,
        aqiColor = this.aqiColor,
        enumMonth = this.enumMonth,
        waterColor = this.waterColor,
        polluteLevel = this.polluteLevel,
        timeDiff = this.timeDiff,
        formatData = this.formatData,
        factorLists = this.factorLists;
    var type = $props.type,
        mode = $props.mode;

    var factor = $props.factor || factorLists[0];
    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('pollute-calendar', customizePrefixCls);
    var currentMonthIndex = function currentMonthIndex(e) {
      var nowYear = parseInt(Moment().format('YYYY'));
      if ($props.year > nowYear) {
        return -1;
      } else if ($props.year < nowYear) {
        return e;
      } else {
        return parseInt(Moment().format('M')) - 1;
      }
    };
    var monthVNodes = !isEmpty(months) ? months.map(function (item) {
      var daysVNodes = item.formatMonths.map(function (e) {
        var itemVNodes = h(
          'div',
          {
            'class': prefixCls + '-left-item-cell',
            style: {
              '--bg-color': timeDiff(e.date) ? mode === 'air' ? toolkits.pollutionFactors.formatValueToColor(formatData[e.timestamp][factor], factor) : toolkits.waterLevel.formatWaterValueToColor(formatData[e.timestamp][factor], factor) : 'rgba(157, 171, 198, 0.25)',
              '--text-color': timeDiff(e.date) ? toolkits.pollutionFactors.formatValueToFontColor(formatData[e.timestamp][factor], factor) : '#8a97a0'
            }
          },
          [e.d]
        );
        if (timeDiff(e.date)) {
          return h(
            Tooltip,
            {
              attrs: { overlayClassName: prefixCls + '-tooltip-wrapper' }
            },
            [h(
              'template',
              { slot: 'title' },
              [_this4.$scopedSlots.tooltip ? _this4.$scopedSlots.tooltip({
                mode: mode,
                data: formatData[e.timestamp],
                type: type,
                timestamp: e.timestamp,
                factorList: factorLists,
                factor: factor
              }) : h(PolluteTooltip, {
                attrs: {
                  mode: mode,
                  prefixCls: prefixCls,
                  data: formatData[e.timestamp],
                  type: type,
                  factorList: factorLists,
                  factor: factor
                }
              })]
            ), itemVNodes]
          );
        } else {
          return itemVNodes;
        }
      });
      return h(
        'div',
        { 'class': prefixCls + '-left-item' },
        [h(
          'div',
          { 'class': prefixCls + '-left-item-text' },
          [item.month]
        ), h(
          'div',
          { 'class': prefixCls + '-left-item-list' },
          [daysVNodes]
        )]
      );
    }) : null;

    var colorList = mode === 'air' ? aqiColor : waterColor;
    var rightVNodes = Object.keys(enumMonth).map(function (e, monthIndex) {
      var itemVNodes = colorList.map(function (item, index) {
        return h(
          'div',
          {
            'class': prefixCls + '-right-footer-item-cell',
            style: {
              '--color': !isEmpty(_this4.$props.data) ? monthIndex <= currentMonthIndex(e) ? '#' + item : 'rgba(157, 171, 198, 0.25)' : 'rgba(157, 171, 198, 0.25)',
              '--textColor': !isEmpty(_this4.$props.data) ? monthIndex <= currentMonthIndex(e) ? index < 4 ? '#000' : '#fff' : '#8a97a0' : '#8a97a0'
            }
          },
          [enumMonth[e][index] || 0]
        );
      });
      return h(
        'div',
        { 'class': prefixCls + '-right-footer-item' },
        [itemVNodes]
      );
    });

    var polluteLevelVNodes = polluteLevel.map(function (item) {
      return h(
        'div',
        { 'class': prefixCls + '-right-header-item' },
        [item]
      );
    });

    return h(
      'div',
      { 'class': prefixCls, ref: 'polluteCalendar' },
      [h(
        'div',
        { 'class': prefixCls + '-left' },
        [h('div', { 'class': prefixCls + '-left-header' }), h(
          'div',
          { 'class': prefixCls + '-left-footer' },
          [monthVNodes]
        )]
      ), h(
        'div',
        { 'class': prefixCls + '-right' },
        [h(
          'div',
          { 'class': prefixCls + '-right-header' },
          [polluteLevelVNodes]
        ), h(
          'div',
          { 'class': prefixCls + '-right-footer' },
          [rightVNodes]
        )]
      )]
    );
  }
};