iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
366 lines (349 loc) • 11.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _vueTypes = require('../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _chartTemplate = require('../chart-template');
var _chartTemplate2 = _interopRequireDefault(_chartTemplate);
var _propsUtil = require('../_util/props-util');
var _lodash = require('lodash');
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _tooltip = require('./tooltip.js');
var _tooltip2 = _interopRequireDefault(_tooltip);
var _mapUtils = require('../toolkits/mapUtils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
name: 'IepDoubleAirLine',
props: (0, _propsUtil.mergeProps)({
data: _vueTypes2['default'].object.def(function () {}),
name: _vueTypes2['default'].array.def(function () {
return [];
}),
time: _vueTypes2['default'].array.def(function () {
return [];
}),
theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
mixinOptions: _vueTypes2['default'].object.def(function () {}),
gap: _vueTypes2['default'].string
}, _chartTemplate2['default'].props),
render: function render() {
var h = arguments[0];
var _$props = this.$props,
data = _$props.data,
time = _$props.time,
name = _$props.name,
theme = _$props.theme,
mixinOptions = _$props.mixinOptions,
gap = _$props.gap;
var options = (0, _extends3['default'])({
color: (0, _mapUtils.chartColor)(),
tooltip: {
trigger: 'axis',
confine: true,
className: 'tooltip-' + theme,
backgroundColor: 'transparent',
borderColor: 'transparent',
textStyle: {
align: 'left'
},
formatter: function formatter(params) {
var data = [];
for (var i = 0; i < params.length; i++) {
var element = params[i];
if (element.data.label) {
data.push({
date: element.axisValue,
color: element.color,
value1: element.seriesName,
value: element.value,
windVal: element.data.label.name
});
} else {
data.push({
date: element.axisValue,
color: element.color,
value1: element.seriesName,
value: element.value
});
}
}
return new _vue2['default']({
render: function render(h) {
return h(_tooltip2['default'], {
props: {
chartData: data,
gap: gap,
theme: theme
}
});
}
}).$mount().$el;
}
},
axisPointer: {
link: { xAxisIndex: 'all' },
label: {
backgroundColor: '#777'
}
},
xAxis: [{
data: [],
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
gridIndex: 0
}, {
data: [],
gridIndex: 1,
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
}
}],
legend: [{
icon: 'circle',
data: [],
top: 0,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: theme === 'dark' ? '#888' : '#999999'
}
}, {
icon: 'circle',
data: [],
top: '55%',
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: theme === 'dark' ? '#888' : '#999999'
}
}],
yAxis: [{
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: theme === 'light',
lineStyle: {
color: theme === 'dark' ? '#fff' : 'rgba(153, 153, 153, 0.3)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
gridIndex: 0
}, {
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: theme === 'light',
lineStyle: {
color: theme === 'dark' ? '#fff' : 'rgba(153, 153, 153, 0.3)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
gridIndex: 0
}, {
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: theme === 'light',
lineStyle: {
color: theme === 'dark' ? '#fff' : 'rgba(153, 153, 153, 0.3)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
gridIndex: 1
}, {
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: theme === 'light',
lineStyle: {
color: theme === 'dark' ? '#fff' : 'rgba(153, 153, 153, 0.3)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
gridIndex: 1
}],
grid: [{
bottom: '50%',
left: '0',
right: '0',
top: '6%',
containLabel: true
}, {
top: '61%',
bottom: '1.6%',
left: '0',
right: '0',
containLabel: true
}],
series: []
}, mixinOptions);
if (data && !(0, _lodash.isEmpty)(data)) {
var legOne = [];
var legTwo = [];
var serverData = [];
for (var i = 0; i < name.length; i++) {
var element = name[i];
if (element.code === 'co' || element.code === 'o3' || element.code === 'voc') {
serverData.push({
name: element.name,
type: 'line',
showSymbol: false,
smooth: true,
xAxisIndex: 0,
yAxisIndex: 1,
data: data[element.code]
});
legOne.push(element.name);
} else if (element.code === 'aqi' || element.code === 'pm25' || element.code === 'pm10' || element.code === 'so2' || element.code === 'no2') {
serverData.push({
name: element.name,
type: 'line',
showSymbol: false,
smooth: true,
xAxisIndex: 0,
yAxisIndex: 0,
data: data[element.code]
});
legOne.push(element.name);
} else if (element.code === 'temperature' || element.code === 'humidity') {
serverData.push({
name: element.name,
type: 'line',
showSymbol: false,
smooth: true,
data: data[element.code],
xAxisIndex: 1,
yAxisIndex: 2
});
legTwo.push(element.name);
} else if (element.code === 'windLevel') {
var wind = [];
for (var q = 0; q < data.windSpeed.length; q++) {
var windVal = data.windSpeed[q];
if (windVal.windLevel) {
wind.push(windVal.windLevel);
} else {
wind.push('-');
}
}
serverData.push({
name: element.name,
type: 'line',
showSymbol: false,
data: wind,
xAxisIndex: 1,
yAxisIndex: 3
});
legTwo.push(element.name);
} else if (element.code === 'windSpeedValue') {
var windV = [];
for (var w = 0; w < data.windSpeed.length; w++) {
var windVa = data.windSpeed[w];
if (windVa.windSpeedValue) {
windV.push({
value: windVa.windSpeedValue,
label: {
show: true,
verticalAlign: 'middle',
position: 'inside',
width: 25,
height: 25,
color: 'transparent',
rotate: data.windDirection[w].windDegrees,
name: data.windDirection[w].windDirectionStr,
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 {
windV.push('-');
}
}
serverData.push({
name: element.name,
type: 'line',
data: windV,
xAxisIndex: 1,
yAxisIndex: 3
});
legTwo.push(element.name);
}
}
options.legend[0].data = legOne;
options.legend[1].data = legTwo;
options.series = serverData;
options.xAxis[0].data = time;
options.xAxis[1].data = time;
var props = (0, _extends3['default'])({}, (0, _lodash.omit)(this.$props, ['time', 'data', 'mixinOptions', 'theme', 'name']), {
options: options
});
return h(_chartTemplate2['default'], { props: props });
} else {
return h(_chartTemplate2['default']);
}
}
};