iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
514 lines (506 loc) • 18.1 kB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import toolkits from '../toolkits';
import PropTypes from '../_util/vue-types';
import isEmpty from 'lodash/isEmpty';
import chunk from 'lodash/chunk';
import map from 'lodash/map';
import empty from '../empty';
import debounce from 'lodash/debounce';
export default {
name: 'IepMultipleData',
components: {
empty: empty
},
props: {
mode: PropTypes.oneOf(['air', 'water']).def('air'),
theme: PropTypes.oneOf(['dark', 'light']).def('dark'),
axis: PropTypes.array.def(function () {
return [];
}),
time: PropTypes.array.def(function () {
return [];
}),
data: PropTypes.object.def(function () {}),
image: PropTypes.any,
description: PropTypes.any,
imageStyle: PropTypes.object
},
data: function data() {
return {
isEmpty: isEmpty,
airToColor: toolkits.pollutionFactors.formatValueToColor,
airTextColor: toolkits.pollutionFactors.formatValueToFontColor,
waterToColor: toolkits.waterLevel.formatWaterValueToColor,
chart: null,
watchData: null,
ignoreTag: ['icon', 'windLevel', 'windDirection', 'aqiMain', 'ciMain', 'pollutantMain']
};
},
computed: {
chartOptions: function chartOptions() {
return {
axis: this.axis,
time: this.time,
data: this.data,
theme: this.theme
};
}
},
created: function created() {
this.handleWindowResize = debounce(this.handleWindowResize, 300);
},
mounted: function mounted() {
var _this = this;
window.addEventListener('resize', this.handleWindowResize);
this.watchData = this.$watch('chartOptions', function (e) {
if (!isEmpty(e.axis) && !isEmpty(e.time) && !isEmpty(e.data)) {
if (_this.chart) {
_this.chart.clear();
}
_this.renderChartView();
}
}, {
immediate: true,
deep: true
});
},
beforeDestroy: function beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize);
this.watchData();
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
methods: {
getDict: function getDict(data, params, mode) {
var airDict = toolkits.pollutionFactors.factorDict.factor;
var waterDict = toolkits.waterLevel.waterDict.factor;
if (mode === 'air') {
if (airDict[data] && airDict[data][params]) {
return airDict[data][params];
} else if (data === 'windLevel') {
return params === 'name' ? '风级' : '';
} else if (data === 'aqiMain') {
return params === 'name' ? '首污' : '';
} else if (data === 'windDirection') {
return params === 'name' ? '风向' : '';
} else if (data === 'icon') {
return params === 'name' ? '天气' : '';
} else {
return '';
}
} else {
return waterDict[data] && waterDict[data][params] ? waterDict[data][params] : '';
}
},
handleWindowResize: function handleWindowResize() {
if (!this.chart) return;
this.chart.resize();
},
formatAxisImg: function formatAxisImg(item) {
var data = this.chartOptions.data[item];
if (item === 'icon') {
return {
nameRotate: 0,
nameTextStyle: {
align: 'center',
padding: 0,
verticalAlign: 'middle',
color: 'transparent',
backgroundColor: {
image: data[0].replace('svg', 'png')
}
}
};
} else if (item === 'windLevel') {
return {
nameRotate: 0,
nameTextStyle: {
align: 'center',
width: 19,
padding: [100, 0, 0, 0],
color: '#0f6eff'
}
};
} else if (item === 'windDirection') {
var windDirection = this.chartOptions.data.windDirection;
return {
nameRotate: parseFloat(windDirection[windDirection.length - 1]),
boundaryGap: false,
inverse: true,
nameTextStyle: {
color: 'transparent',
width: 6,
height: 14,
align: 'center',
verticalAlign: 'middle',
backgroundColor: {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACJUlEQVRYR+2UsWsTYRjGn/dLorkEpQqihg6t5uJQESkdCi6C4CDdSsHkCjqIYEHoHyCC+Bd0sU4ilDuVigpBxEHXDsVNOngXbWN1EVFp7q5KLo8EDRZNe5fEtEtufd/vfX78vns/wQ5/ssP56AH0DHRkYDBfORFI9X3Z6vvS7s/cNoBeqJyEqFcgX9hW+uz2AxjuXYFcIEFKcNwx9yy1A9GWgezE2gGViK1CsKseSsht29SubBuAXvCvifDmhkD3h/u9f/nJvq+tQrRu4DTjesZfEUFmYxippm0rOdN1AD3v5UXB+juIRMm2NB0QtgLRsgG94C2IYLRZCAOO2ffTT7sGcOS8OxKPyeLmAfLsjamd6xpAzvDnAE5uFlBfyQDq2FsraUeFiHwFg/nKwYSocmP1toCYsa3U9H8HyBnuDUCuhw0m+c1dS2U+FsUL663Xoxm4zETO9csADkUZWiOnHCs9G6U3EkA2708qxbkoA3+/jEu2qQ1F6Y8EkCu4ixAZiTKw0RPU5EzpnvYy7EwoQNbwRhWw8M/DA/GFeEipDQlkuMnD9Mi2UuMdA+QMr67+z+oRyyRueevVOx8e7/1cDzhqeKeEuKqAcQjiv64BAYEBx0ytbgURakAveEURjJF8TmDWsVJFQGrNhmYNr19BpkheEkFfUI0Nlx7sft0RACYYywL7nXn5FKazUR+4yCTd9cMr89q7sDOhBsIGdFrvAfQM9Az8BBnqvCFWSrVTAAAAAElFTkSuQmCC'
}
}
};
} else {
return {
nameRotate: 0,
nameTextStyle: {
align: 'center',
width: 14,
height: 5,
padding: [100, 0, 0, 0],
color: '#0f6eff'
}
};
}
},
weatherFormat: function weatherFormat(item, key) {
var _this2 = this;
if (key === 'icon') {
return item.map(function (e, index) {
var label = {};
if (isEmpty(e)) {
label = {
show: true,
width: 14,
height: 14,
color: 'transparent'
};
} else {
label = {
show: true,
width: 14,
height: 14,
color: 'transparent',
backgroundColor: {
image: e.replace('svg', 'png')
}
};
}
return {
name: index,
value: 0,
position: ['50%', '40%'],
label: label
};
});
} else if (key === 'windLevel') {
return item.map(function (e, index) {
return {
name: index,
value: e,
itemStyle: {
color: 'transparent'
},
label: {
verticalAlign: 'middle',
position: 'insideBottom',
show: true,
width: 14,
height: 14
}
};
});
} else if (key === 'windDirection') {
return item.map(function (e, index) {
return {
name: index,
value: 100,
itemStyle: {
color: 'transparent'
},
label: {
show: true,
verticalAlign: 'middle',
position: 'inside',
width: 14,
height: 14,
color: 'transparent',
rotate: _this2.calcWindSpeedIcon(e),
backgroundColor: {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACJUlEQVRYR+2UsWsTYRjGn/dLorkEpQqihg6t5uJQESkdCi6C4CDdSsHkCjqIYEHoHyCC+Bd0sU4ilDuVigpBxEHXDsVNOngXbWN1EVFp7q5KLo8EDRZNe5fEtEtufd/vfX78vns/wQ5/ssP56AH0DHRkYDBfORFI9X3Z6vvS7s/cNoBeqJyEqFcgX9hW+uz2AxjuXYFcIEFKcNwx9yy1A9GWgezE2gGViK1CsKseSsht29SubBuAXvCvifDmhkD3h/u9f/nJvq+tQrRu4DTjesZfEUFmYxippm0rOdN1AD3v5UXB+juIRMm2NB0QtgLRsgG94C2IYLRZCAOO2ffTT7sGcOS8OxKPyeLmAfLsjamd6xpAzvDnAE5uFlBfyQDq2FsraUeFiHwFg/nKwYSocmP1toCYsa3U9H8HyBnuDUCuhw0m+c1dS2U+FsUL663Xoxm4zETO9csADkUZWiOnHCs9G6U3EkA2708qxbkoA3+/jEu2qQ1F6Y8EkCu4ixAZiTKw0RPU5EzpnvYy7EwoQNbwRhWw8M/DA/GFeEipDQlkuMnD9Mi2UuMdA+QMr67+z+oRyyRueevVOx8e7/1cDzhqeKeEuKqAcQjiv64BAYEBx0ytbgURakAveEURjJF8TmDWsVJFQGrNhmYNr19BpkheEkFfUI0Nlx7sft0RACYYywL7nXn5FKazUR+4yCTd9cMr89q7sDOhBsIGdFrvAfQM9Az8BBnqvCFWSrVTAAAAAElFTkSuQmCC'
}
}
};
});
} else if (key === 'aqiMain' || key === 'ciMain' || key === 'pollutantMain') {
return item.map(function (e) {
return {
name: e,
value: 0,
itemStyle: {
color: 'transparent'
},
label: {
align: 'left',
fontSize: 6,
fontWeight: 'bold',
extra: e.name,
formatter: function formatter(e) {
return e.name.substring(0, 5);
},
rotate: 90,
color: '#E41D30',
position: 'inside',
show: true
}
};
});
} else {
return item.map(function () {
return 0;
});
}
},
calcWindSpeedIcon: function calcWindSpeedIcon(val) {
var num = 0,
arr = {
'⻄北⻛': 0,
'北⻛': 45,
'东北⻛': 90,
'东⻛': 135,
'东南⻛': 180,
南风: 225,
'⻄南⻛': 270,
'西⻛': 315
};
try {
return arr[toolkits.pollutionFactors.getWindSpeed(val)] || 0;
} catch (error) {}
return num;
},
lineFeed: function lineFeed(e) {
return (/.*[\u4e00-\u9fa5]+.*$/.test(e) ? chunk(e.split(''), 3).map(function (item) {
return item.join('');
}).map(function (item, index) {
return index % 2 === 1 ? '\n' + item : item;
}).join('') : e
);
},
formatAxisName: function formatAxisName(index, item) {
var nowItem = this.chartOptions.data[item];
return nowItem[nowItem.length - 1];
},
formatTooltipValue: function formatTooltipValue(e, index, data) {
var item = data[index];
if (item.seriesName === 'aqiMain' || item.seriesName === 'ciMain') {
return item.data.name ? item.data.name : '';
} else if (item.seriesName === 'windDirection' || item.seriesName === 'winddirection') {
var rotate = item.data.label.rotate;
return e ? '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACJUlEQVRYR+2UsWsTYRjGn/dLorkEpQqihg6t5uJQESkdCi6C4CDdSsHkCjqIYEHoHyCC+Bd0sU4ilDuVigpBxEHXDsVNOngXbWN1EVFp7q5KLo8EDRZNe5fEtEtufd/vfX78vns/wQ5/ssP56AH0DHRkYDBfORFI9X3Z6vvS7s/cNoBeqJyEqFcgX9hW+uz2AxjuXYFcIEFKcNwx9yy1A9GWgezE2gGViK1CsKseSsht29SubBuAXvCvifDmhkD3h/u9f/nJvq+tQrRu4DTjesZfEUFmYxippm0rOdN1AD3v5UXB+juIRMm2NB0QtgLRsgG94C2IYLRZCAOO2ffTT7sGcOS8OxKPyeLmAfLsjamd6xpAzvDnAE5uFlBfyQDq2FsraUeFiHwFg/nKwYSocmP1toCYsa3U9H8HyBnuDUCuhw0m+c1dS2U+FsUL663Xoxm4zETO9csADkUZWiOnHCs9G6U3EkA2708qxbkoA3+/jEu2qQ1F6Y8EkCu4ixAZiTKw0RPU5EzpnvYy7EwoQNbwRhWw8M/DA/GFeEipDQlkuMnD9Mi2UuMdA+QMr67+z+oRyyRueevVOx8e7/1cDzhqeKeEuKqAcQjiv64BAYEBx0ytbgURakAveEURjJF8TmDWsVJFQGrNhmYNr19BpkheEkFfUI0Nlx7sft0RACYYywL7nXn5FKazUR+4yCTd9cMr89q7sDOhBsIGdFrvAfQM9Az8BBnqvCFWSrVTAAAAAElFTkSuQmCC" style="width: 15px; height: 15px; transform: rotate(' + -rotate + 'deg)"/>' : '';
} else {
return e;
}
},
renderChartView: function renderChartView() {
var _this3 = this;
var theme = this.$props.theme;
var height = this.$el.clientHeight;
var len = this.chartOptions.axis.length;
var gridItemHeight = height / len;
var dom = this.$refs.chartDom;
if (isEmpty(dom) || !dom) {
return false;
}
this.chart = toolkits.echarts.init(dom);
var options = {
background: 'transparent',
tooltip: {
trigger: 'axis',
appendToBody: true,
className: 'tooltip-' + theme,
axisPointer: {
type: 'shadow'
},
formatter: function formatter(params) {
var str = '<div class="tooltips-header" style="display:flex;align-items: center;font-size: 12.6px">' + params[0].axisValue + '</div>';
params.forEach(function (item, index) {
str += '<div style="display:flex;align-items: center;font-size: 12px;"><span style="display: inline-block;width: 5px;height: 5px;border-radius: 100%;margin-right: 6px;background: ' + (item.color === 'transparent' ? 'rgb(13, 72, 165)' : item.color) + '"> </span>' + _this3.getDict(item.seriesName, 'name', _this3.mode) + ' : ' + _this3.formatTooltipValue(item.value, index, params) + ' ' + _this3.getDict(item.seriesName, 'unit', _this3.mode) + '</div>';
});
return str;
}
},
axisPointer: {
link: { xAxisIndex: 'all' },
label: {
backgroundColor: '#777'
},
shadowStyle: {
color: 'rgba(49,139,255,0.2)'
}
},
xAxis: map(this.chartOptions.axis, function (item, idx) {
return {
show: !idx,
position: 'top',
top: 10,
gridIndex: idx,
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
type: 'category',
data: _this3.chartOptions.time
};
}),
yAxis: [].concat(_toConsumableArray(map(this.chartOptions.axis, function (item, idx) {
return {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
nameGap: 10,
nameLocation: 'middle',
name: _this3.lineFeed(_this3.getDict(item, 'name', _this3.mode)),
nameRotate: 0,
gridIndex: idx,
nameTextStyle: {
padding: [0, 0, 0, 0],
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: false
}
};
})), _toConsumableArray(map(this.chartOptions.axis, function (item, index) {
return _extends({
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
nameLocation: 'center',
name: _this3.formatAxisName(index, item),
position: 'right',
gridIndex: index,
splitLine: {
show: false
}
}, _this3.formatAxisImg(item, index));
}))),
grid: map(this.chartOptions.axis, function (item, idx) {
return {
show: true,
top: idx * gridItemHeight,
height: gridItemHeight + 'px',
left: 50,
right: 30,
bottom: 0,
containLabel: true,
backgroundColor: 'rgba(100, 123, 255, 0.27)',
borderColor: 'transparent'
};
}),
series: [].concat(_toConsumableArray(map(this.chartOptions.axis, function (item, idx) {
return {
name: item,
type: 'bar',
smooth: true,
itemStyle: {
normal: {
color: function color(params) {
var v = params.value;
var t = params.seriesName;
return t === 'windDirection' || t === 'windLevel' ? 'transparent' : _this3.mode === 'air' ? _this3.airToColor(v, t) : _this3.waterToColor(v, t);
}
}
},
label: {
show: false,
position: 'top',
backgroundColor: 'rgba(0,0,0,0)',
color: '#212121'
},
symbolSize: 3,
xAxisIndex: idx,
yAxisIndex: idx,
showSymbol: false,
data: _this3.chartOptions.data[item] ? !_this3.ignoreTag.includes(item) ? _this3.chartOptions.data[item] : _this3.weatherFormat(_this3.chartOptions.data[item], item) : []
};
})), _toConsumableArray(map(this.chartOptions.axis, function (item, idx) {
return {
name: 0,
type: 'line',
inlineStyle: {
color: 'transparent'
},
itemStyle: {
color: 'transparent'
},
smooth: true,
symbolSize: 3,
xAxisIndex: idx,
yAxisIndex: idx,
showSymbol: false,
data: []
};
})))
};
this.chart.setOption(this.chartOptions.time.length > 24 ? _extends(options, {
dataZoom: [{
type: 'slider',
start: 0,
end: 20,
handleSize: 0,
height: 10,
left: 100,
right: 100,
bottom: 10,
xAxisIndex: this.chartOptions.axis.map(function (item, index) {
return index;
}),
borderRadius: 5,
showDataShadow: false,
showDetail: false,
realtime: true,
filterMode: 'filter'
}, {
type: 'inside',
show: true,
xAxisIndex: this.chartOptions.axis.map(function (item, index) {
return index;
}),
start: 0,
end: 20
}]
}) : options);
}
},
render: function render() {
var h = arguments[0];
var _$props = this.$props,
imageStyle = _$props.imageStyle,
image = _$props.image,
description = _$props.description;
var emptyProps = {
imageStyle: imageStyle,
image: image,
description: description
};
var chartNodes = h('div', { 'class': 'iep-chart-core', ref: 'chartDom' });
return h(
'div',
{ 'class': 'iep-chart' },
[this.isEmpty(this.chartOptions.data) ? h(
'div',
{ 'class': 'iep-chart-empty' },
[h('empty', { props: emptyProps })]
) : chartNodes]
);
}
};