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

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

import PropTypes from '../_util/vue-types';
import toolkits from '../toolkits';
import moment from 'moment';
import { filter } from 'lodash';

var airParamsEnumKeys = [{
  key: 'so2',
  name: 'SO2',
  ncode: 'a21026',
  unit: 'ug/m³'
}, {
  key: 'no2',
  name: 'NO2',
  ncode: 'a21004',
  unit: 'ug/m³'
}, {
  key: 'co',
  name: 'CO',
  ncode: 'a21005',
  unit: 'mg/m³'
}, {
  key: 'o3',
  name: 'O3',
  ncode: 'a05024',
  unit: 'ug/m³'
}, {
  key: 'pm25',
  name: 'PM2.5',
  ncode: 'a34004',
  unit: 'ug/m³'
}, {
  key: 'pm10',
  name: 'PM10',
  ncode: 'a34002',
  unit: 'ug/m³'
}];

var waterParamsEnumKeys = [{
  key: 'ph',
  name: 'pH值',
  ncode: 'w01001'
}, {
  key: 'cod',
  name: '化学需氧量',
  ncode: 'w01018'
}, {
  key: 'nh3n',
  name: '氨氮(NH3-N)',
  ncode: 'w21003'
}, {
  key: 'tp',
  name: '总磷(以 P 计)',
  ncode: 'w21011'
}, {
  key: 'tn',
  name: '总氮(以 N 计)',
  ncode: 'w21001'
}, {
  key: 'dissolvedOxygen',
  name: '溶解氧',
  ncode: 'w01009'
}];

export default {
  name: 'PolluteTooltip',
  props: {
    data: {
      type: Object,
      'default': function _default() {}
    },
    prefixCls: PropTypes.string,
    mode: PropTypes.string.def('air'),
    type: PropTypes.string,
    factorList: PropTypes.array,
    factor: PropTypes.string
  },
  data: function data() {
    return {
      factorDict: toolkits.pollutionFactors.factorDict,
      waterDict: toolkits.waterLevel.waterDict,
      formatValueToColor: toolkits.pollutionFactors.formatValueToColor,
      waterFormatValueToColor: toolkits.waterLevel.formatWaterValueToColor,
      formatWaterLevel: toolkits.waterLevel.formatWaterLevel,
      formatValueToFontColor: toolkits.pollutionFactors.formatValueToFontColor
    };
  },
  render: function render() {
    var h = arguments[0];
    var $props = this.$props,
        data = this.data,
        factorDict = this.factorDict,
        waterDict = this.waterDict,
        formatValueToColor = this.formatValueToColor,
        formatValueToFontColor = this.formatValueToFontColor,
        waterFormatValueToColor = this.waterFormatValueToColor,
        formatWaterLevel = this.formatWaterLevel;
    var type = $props.type,
        mode = $props.mode,
        factorList = $props.factorList,
        factor = $props.factor;

    var paramsVNodes = filter(factorList, function (e) {
      return e !== factor;
    }).map(function (item) {
      return h(
        'div',
        { 'class': $props.prefixCls + '-tooltip-footer-item' },
        [h('span', [mode === 'air' ? factorDict.factor[item].name : waterDict.factor[item].name]), h(
          'span',
          {
            style: {
              '--bg-color': (mode === 'air' ? formatValueToColor : waterFormatValueToColor)(data[item], item),
              '--text-color': formatValueToFontColor(data[item], item)
            }
          },
          [parseFloat(data[item]) >= 0 ? data[item] : '--']
        )]
      );
    });

    return h(
      'div',
      { 'class': $props.prefixCls + '-tooltip' },
      [h(
        'div',
        { 'class': $props.prefixCls + '-tooltip-header' },
        [h('span', [moment(data.time).format('YYYY/MM/DD')])]
      ), h(
        'div',
        { 'class': $props.prefixCls + '-tooltip-aqi' },
        [h('span', [mode === 'air' ? factorDict.factor[factor].name : waterDict.factor[factor].name]), h(
          'span',
          {
            style: {
              '--bg-color': mode === 'air' ? formatValueToColor(data[factor], factor) : waterFormatValueToColor(data[factor], factor),
              '--text-color': formatValueToFontColor(data[factor], factor)
            }
          },
          [mode === 'air' ? parseFloat(data[factor]) >= 0 ? data[factor] : '--' : parseFloat(data[factor]) >= 0 ? formatWaterLevel(data[factor]) : '--']
        )]
      ), h(
        'div',
        { 'class': $props.prefixCls + '-tooltip-footer' },
        [paramsVNodes]
      )]
    );
  }
};