iep-ui/es/air-quality-trend-chart-aqi/AirQualityTrendChartAqi.js

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

import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import { TimesType } from '../_util/moment-util';
import Panel from './Panel';
import Dragdealer from 'rk-web-dragdealer';
import { extendMoment } from 'moment-range';
import moment from 'moment';
import { isEmpty } from 'lodash';
moment.locale('zh-cn');

export var rangeDateTime = function rangeDateTime(start, end) {
  var interval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'days';

  var momentRange = extendMoment(moment);
  var range = momentRange.range(start, end);
  return Array.from(range.by(interval));
};

export default {
  name: 'AAirQualityTrendChartAqi',
  props: {
    date: TimesType,
    axis: PropTypes.array.def(function () {
      return [];
    }),
    time: PropTypes.array.def(function () {
      return [];
    }),
    data: PropTypes.array.def(function () {
      return [];
    }),
    colors: PropTypes.array.def(function () {
      return ['#3dcd1a', '#f1bb1e', '#e51d30', '#f15b1e', '#f1bb1e', '#3dcd1a', '#3dcd1a', '#f1bb1e', '#3dcd1a'];
    }),
    mode: PropTypes.oneOf(['air', 'water']).def('air')
  },
  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      isMove: false,
      left: 0,
      width: 0,
      block: 0,
      title: '',
      rangeDate: []
    };
  },

  watch: {
    date: {
      handler: function handler(e) {
        this.rangeDate = rangeDateTime(e[0], e[1]);
        this.title = moment(e[0]).format('MM-DD') + '\u81F3' + moment(e[1]).format('MM-DD') + '\u65E5\u5747\u8D8B\u52BF';
      },

      immediate: true,
      deep: true
    }
  },
  mounted: function mounted() {
    if (this.$refs.panel) {
      this.width = this.$refs.panel.clientWidth;
    }
    this.initSlider();
  },

  methods: {
    initSlider: function initSlider() {
      var _this = this;

      new Dragdealer(this.$refs.progress, {
        animationCallback: function animationCallback(x, y) {
          _this.block = x * (_this.width / 3) * _this.rangeDate.length;
          _this.$refs.panelWrapper.style.transform = 'translateX(-' + (x <= 0 ? _this.block : _this.block - _this.width / 3) + 'px)';
        }
      });
    }
  },
  render: function render() {
    var _this2 = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $props = this.$props;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('air-quality-trend-chart-aqi', customizePrefixCls);
    var data = $props.data,
        axis = $props.axis,
        time = $props.time,
        mode = $props.mode;


    var dateVNodes = this.rangeDate.map(function (item, index) {
      return h(
        'div',
        { 'class': prefixCls + '-header-progress-label-item' },
        [moment(item).format('MM-DD')]
      );
    });

    var panelVNodes = this.rangeDate.map(function (item, index) {
      return h(
        Panel,
        {
          attrs: {
            prefixCls: prefixCls,
            mode: mode,
            time: time,
            axis: axis,
            data: !isEmpty(data) ? data[index] : {},
            date: moment(item).format('MM-DD'),
            week: moment(item).format('dddd')
          },
          style: { width: _this2.width / 3 + 'px' }
        },
        [index]
      );
    });

    var color = 'linear-gradient(90.00deg, ' + this.colors.map(function (item, index) {
      return item + ' ' + _this2.colors.length / 100 * index * 100 + '%';
    }).toString() + ')';
    if (this.$refs.progress) {
      this.$refs.progress.style.background = color;
    }

    return h(
      'div',
      { 'class': prefixCls, ref: 'panel' },
      [h(
        'div',
        { 'class': prefixCls + '-title' },
        [this.title]
      ), h(
        'div',
        { 'class': prefixCls + '-header' },
        [h(
          'div',
          { 'class': prefixCls + '-header-label' },
          ['\u7A7A\u6C14\u8D28\u91CF']
        ), h(
          'div',
          { 'class': prefixCls + '-header-progress' },
          [h(
            'div',
            { 'class': prefixCls + '-header-progress-label' },
            [dateVNodes]
          ), h(
            'div',
            { 'class': prefixCls + '-header-progress-core', ref: 'progress' },
            [h('div', { 'class': prefixCls + '-header-progress-default' }), h('div', { 'class': prefixCls + '-header-progress-mark handle', ref: 'slider' })]
          )]
        )]
      ), h(
        'div',
        { 'class': prefixCls + '-footer' },
        [h(
          'div',
          { 'class': prefixCls + '-footer-core', ref: 'panelWrapper' },
          [panelVNodes]
        )]
      )]
    );
  }
};