iep-ui/es/iep-business-block/business-block-weather.js

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

import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import BgIcon from './icons/bgIcon';
import AqiIcon from './icons/aqiIcon';
import NowIcon from './icons/nowIcon';
import PaimingIcon from './icons/paimingIcon';

export default {
  name: 'IepBusinessBlockWeather',
  props: {
    aqiNumber: PropTypes.string.def('-'),
    aqiLevel: PropTypes.string.def('-'),
    aqiColor: PropTypes.string.def('#fff'),
    nowNumber: PropTypes.string.def('-'),
    nowLevel: PropTypes.string.def('-'),
    nowColor: PropTypes.string.def('#fff'),
    fineNumber: PropTypes.string.def('-'),
    fineUnit: PropTypes.string.def('优'),
    rankNumber: PropTypes.string.def('-')
  },
  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  render: function render() {
    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $props = this.$props;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-business-block-weather', customizePrefixCls);
    var aqiNumber = $props.aqiNumber,
        aqiLevel = $props.aqiLevel,
        aqiColor = $props.aqiColor,
        nowNumber = $props.nowNumber,
        nowLevel = $props.nowLevel,
        nowColor = $props.nowColor,
        fineNumber = $props.fineNumber,
        fineUnit = $props.fineUnit,
        rankNumber = $props.rankNumber;

    return h(
      'div',
      { 'class': prefixCls },
      [h(
        'div',
        { 'class': prefixCls + '-item' },
        [h(
          'div',
          { 'class': prefixCls + '-item-left' },
          [h(AqiIcon), h(BgIcon)]
        ), h(
          'div',
          { 'class': prefixCls + '-item-right' },
          [h(
            'div',
            { 'class': prefixCls + '-item-right-top' },
            [h('span', ['\u5B9E\u65F6AQI'])]
          ), h(
            'div',
            { 'class': prefixCls + '-item-right-bottom' },
            [h(
              'span',
              {
                'class': 'num',
                style: {
                  '--numberColor': aqiColor,
                  '--margin': '0 4px 0 0'
                }
              },
              [aqiNumber]
            ), h(
              'span',
              {
                'class': 'text',
                style: {
                  '--textColor': aqiColor
                }
              },
              [aqiLevel]
            )]
          )]
        )]
      ), h(
        'div',
        { 'class': prefixCls + '-item' },
        [h(
          'div',
          { 'class': prefixCls + '-item-left' },
          [h(NowIcon), h(BgIcon)]
        ), h(
          'div',
          { 'class': prefixCls + '-item-right' },
          [h(
            'div',
            { 'class': prefixCls + '-item-right-top' },
            [h('span', ['\u4ECA\u65E5\u7D2F\u8BA1'])]
          ), h(
            'div',
            { 'class': prefixCls + '-item-right-bottom' },
            [h(
              'span',
              {
                'class': 'num',
                style: {
                  '--numberColor': nowColor,
                  '--margin': '0 4px 0 0'
                }
              },
              [nowNumber]
            ), h(
              'span',
              {
                'class': 'text',
                style: {
                  '--textColor': nowColor
                }
              },
              [nowLevel]
            )]
          )]
        )]
      ), h(
        'div',
        { 'class': prefixCls + '-item' },
        [h(
          'div',
          { 'class': prefixCls + '-item-left' },
          [h('span', [fineUnit]), h(BgIcon)]
        ), h(
          'div',
          { 'class': prefixCls + '-item-right' },
          [h(
            'div',
            { 'class': prefixCls + '-item-right-top' },
            [h('span', ['\u4ECA\u5E74\u7D2F\u8BA1\u4F18\u826F\u5929\u6570'])]
          ), h(
            'div',
            { 'class': prefixCls + '-item-right-bottom' },
            [h(
              'span',
              {
                'class': 'num',
                style: {
                  '--numberColor': '#fff',
                  '--margin': '0 4px 0 0'
                }
              },
              [fineNumber]
            ), h(
              'span',
              {
                'class': 'text',
                style: {
                  '--textColor': '#fff'
                }
              },
              ['\u5929']
            )]
          )]
        )]
      ), h(
        'div',
        { 'class': prefixCls + '-item' },
        [h(
          'div',
          { 'class': prefixCls + '-item-left' },
          [h(PaimingIcon), h(BgIcon)]
        ), h(
          'div',
          { 'class': prefixCls + '-item-right' },
          [h(
            'div',
            { 'class': prefixCls + '-item-right-top' },
            [h('span', ['\u5168\u56FD168\u57CE\u5E02\u6392\u540D'])]
          ), h(
            'div',
            { 'class': prefixCls + '-item-right-bottom' },
            [h(
              'span',
              {
                'class': 'text',
                style: {
                  '--textColor': '#fff'
                }
              },
              ['\u7B2C']
            ), h(
              'span',
              {
                'class': 'num',
                style: {
                  '--numberColor': '#fff',
                  '--margin': '0 4px'
                }
              },
              [rankNumber]
            ), h(
              'span',
              {
                'class': 'text',
                style: {
                  '--textColor': '#fff'
                }
              },
              ['\u540D']
            )]
          )]
        )]
      )]
    );
  }
};