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

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.rangeDateTime = undefined;

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _configConsumerProps = require('../config-provider/configConsumerProps');

var _momentUtil = require('../_util/moment-util');

var _Panel = require('./Panel');

var _Panel2 = _interopRequireDefault(_Panel);

var _rkWebDragdealer = require('rk-web-dragdealer');

var _rkWebDragdealer2 = _interopRequireDefault(_rkWebDragdealer);

var _momentRange = require('moment-range');

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _lodash = require('lodash');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

_moment2['default'].locale('zh-cn');

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

  var momentRange = (0, _momentRange.extendMoment)(_moment2['default']);
  var range = momentRange.range(start, end);
  return Array.from(range.by(interval));
};

exports['default'] = {
  name: 'AAirQualityTrendChartAqi',
  props: {
    date: _momentUtil.TimesType,
    axis: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    time: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    data: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    colors: _vueTypes2['default'].array.def(function () {
      return ['#3dcd1a', '#f1bb1e', '#e51d30', '#f15b1e', '#f1bb1e', '#3dcd1a', '#3dcd1a', '#f1bb1e', '#3dcd1a'];
    }),
    mode: _vueTypes2['default'].oneOf(['air', 'water']).def('air')
  },
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.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 = (0, _moment2['default'])(e[0]).format('MM-DD') + '\u81F3' + (0, _moment2['default'])(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 _rkWebDragdealer2['default'](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' },
        [(0, _moment2['default'])(item).format('MM-DD')]
      );
    });

    var panelVNodes = this.rangeDate.map(function (item, index) {
      return h(
        _Panel2['default'],
        {
          attrs: {
            prefixCls: prefixCls,
            mode: mode,
            time: time,
            axis: axis,
            data: !(0, _lodash.isEmpty)(data) ? data[index] : {},
            date: (0, _moment2['default'])(item).format('MM-DD'),
            week: (0, _moment2['default'])(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]
        )]
      )]
    );
  }
};