iep-ui/es/scroll-bar-params/ScrollBar.js

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

import PropTypes from '../_util/vue-types';
import ChartTemplate from '../chart-template';
import { mergeProps } from '../_util/props-util';
import { IepIcon } from 'rk-web-icon';
export default {
  name: 'IepScrollBarParams',
  props: mergeProps({
    select: PropTypes.string.def(function () {
      return '';
    }),
    text: PropTypes.string.def(function () {
      return '';
    }),
    direction: PropTypes.oneOf(['horizontal', 'vertical']).def('horizontal'),
    bar: PropTypes.array.def([{
      key: 'PM2.5',
      code: 'pm25'
    }, {
      key: 'PM10',
      code: 'pm10'
    }, {
      key: 'SO2',
      code: 'so2'
    }, {
      key: 'NO2',
      code: 'no2'
    }, {
      key: 'CO',
      code: 'co'
    }, {
      key: 'O3',
      code: 'o3'
    }, {
      key: 'VOC',
      code: 'voc'
    }, {
      key: 'TSP',
      code: 'tsp'
    }, {
      key: '温度',
      code: 'temperature'
    }, {
      key: '湿度',
      code: 'humidity'
    }, {
      key: '风向',
      code: 'windDirection'
    }]),
    theme: PropTypes.oneOf(['dark', 'light']).def('dark')
  }, ChartTemplate.props),
  data: function data() {
    return {
      params: 'pm25',
      scroll: {
        x: 0,
        y: 0
      }
    };
  },
  created: function created() {
    this.params = this.select;
  },

  methods: {
    handleParams: function handleParams(e) {
      this.params = e.code;
      this.$emit('change', {
        params: e.code,
        value: this.direction === 'horizontal' ? 'dependentVariable' : 'independentVariable'
      });
    },
    handleDirection: function handleDirection(e) {
      if (this.bar.length < 12) {
        return false;
      }
      if (e === 1) {
        if (this.direction === 'horizontal') {
          this.scroll = {
            x: -100,
            y: 0
          };
        } else {
          this.scroll = {
            x: 0,
            y: -80
          };
        }
      } else {
        this.scroll = {
          x: 0,
          y: 0
        };
      }
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var _$props = this.$props,
        text = _$props.text,
        direction = _$props.direction,
        bar = _$props.bar;

    return h(
      'div',
      { 'class': 'scroll-bar-params' },
      [h(
        'div',
        { 'class': ['bar', 'bar-' + direction] },
        [h(
          'div',
          { 'class': 'bar-text', style: { color: this.theme === 'light' ? '#000' : '#fff' } },
          [text]
        ), h(
          'div',
          {
            'class': 'bar-core',
            style: { backgroundColor: this.theme === 'light' ? '#EFF6FF' : '#333' }
          },
          [h(
            'div',
            {
              'class': ('bar-core-btn', bar > 11 ? '' : 'disable'),
              on: {
                'click': this.handleDirection.bind(this, 1)
              }
            },
            [h(IepIcon, {
              attrs: { type: direction === 'horizontal' ? 'basic_solid_directive_left' : 'basic_solid_directive_up' }
            })]
          ), h(
            'div',
            { 'class': 'bar-core-params' },
            [h(
              'div',
              {
                'class': 'bar-core-params-inner',
                style: {
                  transform: direction === 'horizontal' ? 'translateX(' + this.scroll.x + 'px)' : 'translateY(' + this.scroll.y + 'px)'
                }
              },
              [bar.map(function (item, index) {
                return h(
                  'div',
                  {
                    'class': ['bar-core-params-item', _this.params === item.code ? 'active' : '', _this.theme],
                    on: {
                      'click': _this.handleParams.bind(_this, item)
                    },

                    key: index
                  },
                  [item.key]
                );
              })]
            )]
          ), h(
            'div',
            {
              'class': ['bar-core-btn', bar.length > 11 ? '' : 'disable'],
              on: {
                'click': this.handleDirection.bind(this, 2)
              }
            },
            [h(IepIcon, {
              attrs: { type: direction === 'horizontal' ? 'basic_solid_directive_right' : 'basic_solid_directive_down' }
            })]
          )]
        )]
      )]
    );
  }
};