iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
373 lines (344 loc) • 11.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _debounce = require('lodash/debounce');
var _debounce2 = _interopRequireDefault(_debounce);
var _isEmpty = require('lodash/isEmpty');
var _isEmpty2 = _interopRequireDefault(_isEmpty);
var _toolkits = require('../toolkits');
var _toolkits2 = _interopRequireDefault(_toolkits);
var _vueTypes = require('../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _tooltip = require('./tooltip');
var _tooltip2 = _interopRequireDefault(_tooltip);
var _lodash = require('lodash');
var _enum = require('./enum');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
data: function data() {
return {
chart: null,
chartBigger: null,
isFullScreen: false,
visible: false
};
},
props: {
parm: _vueTypes2['default'].any,
mode: _vueTypes2['default'].oneOf(['air', 'water']).def('air'),
theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
lineTextColor: _vueTypes2['default'].string,
time: _vueTypes2['default'].array.def(function () {
return [];
}),
data: _vueTypes2['default'].any
},
created: function created() {
this.handleWindowResize = (0, _debounce2['default'])(this.handleWindowResize, 300);
},
mounted: function mounted() {
var _this = this;
window.addEventListener('resize', this.handleWindowResize);
setTimeout(function () {
var dom = _this.$refs['single-line'];
_this.renderChartView(_this.chart, dom);
});
},
computed: {
factor: function factor() {
return this.$props.mode === 'air' ? _toolkits2['default'].pollutionFactors.factorDict.factor : _toolkits2['default'].waterLevel.waterDict.factor;
},
title: function title() {
var _this2 = this;
var str = '';
if (Array.isArray(this.$props.parm)) {
this.$props.parm.map(function (item) {
return str += _this2.factor[item].name;
});
str += '趋势图';
} else {
str += this.factor[this.$props.parm].name + '趋势图';
}
return str;
}
},
methods: {
handleWindowResize: function handleWindowResize() {
if (this.chart) {
this.chart.resize();
}
},
renderChartView: function renderChartView(chart, dom, isFullScreen) {
var _this3 = this;
if ((0, _isEmpty2['default'])(dom) || !dom) {
return false;
}
if (!(0, _isEmpty2['default'])(chart)) {
this.chart.dispose(); //销毁
}
chart = _toolkits2['default'].echarts.init(dom, { renderer: 'svg' });
var factor = this.factor;
var tooltip = {
trigger: 'axis',
appendToBody: true,
enterable: true,
confine: true,
backgroundColor: 'transparent',
borderColor: 'transparent',
padding: 0,
formatter: function formatter(params) {
var data = {
title: params[0].axisValue,
mode: _this3.mode,
list: params.map(function (item) {
return {
text: item.seriesName + factor[item.data.parm].name,
name: item.data.parm,
value: item.data.value,
icon: item.data.parm === 'weather' ? item.data.value : '',
color: item.color,
unit: factor[item.data.parm].unit,
rotate: item.data.parm === 'windDirection' ? item.data.label.rotate : '',
key: item.dataIndex
};
})
};
return new _vue2['default']({
render: function render(h) {
return h(_tooltip2['default'], {
props: {
chartData: data,
theme: _this3.$props.theme
}
});
}
}).$mount().$el;
}
};
var colorMap = !Array.isArray(this.$props.parm) ? factor[this.$props.parm].colorMap : {};
var arrValue = (0, _lodash.uniq)(Object.values(colorMap).reduce(function (a, b) {
return a.concat(b);
}, []));
var colors = Object.keys(colorMap).sort(function (a, b) {
return colorMap[a][0] - colorMap[b][0];
}).map(function (e) {
return '#' + e;
});
var lineTextColor = isFullScreen ? '#333' : this.$props.lineTextColor;
var visualMap = arrValue.length ? {
min: Math.min.apply(Math, (0, _toConsumableArray3['default'])(arrValue)),
max: Math.max.apply(Math, (0, _toConsumableArray3['default'])(arrValue)),
orient: 'vertical',
align: 'right',
precision: 0,
right: 0,
top: '5%',
itemHeight: dom.offsetHeight * 0.7,
text: [factor[this.$props.parm].unit || ' ', ''],
calculable: true,
inRange: {
color: colors
},
textStyle: {
width: 10,
color: lineTextColor
},
formatter: function formatter(value) {
if (value > 9999 && value <= 99999999) {
return parseFloat((value / 10000).toFixed(2)) + '万';
} else if (value > 99999999) {
return parseFloat((value / 100000000).toFixed(2)) + '亿';
}
return parseFloat(value.toFixed(2)); // 范围标签显示内容。
}
} : null;
var gridWidth = dom.clientWidth * (1 - (0.05 + 0.05));
var barWidth = 60;
var srollLen = Math.floor(gridWidth / barWidth);
var end = Math.floor(srollLen / this.$props.time.length * 100);
var dataZoom = [{
type: 'slider',
right: visualMap ? '15%' : '5%',
start: 0,
end: end,
height: 10
}];
var series = !Array.isArray(this.$props.parm) ? this.$props.data[this.$props.parm].map(function (item) {
return {
name: item.name,
type: 'line',
smooth: false,
symbolSize: 3,
lineStyle: {
width: _this3.$props.parm === 'windDirection' ? 0 : 2
},
data: item.data.map(function (e) {
return {
parm: _this3.$props.parm,
value: e
};
})
};
}) : (0, _lodash.flatten)(this.$props.parm.map(function (e) {
return _this3.$props.data[e].map(function (item, idx) {
return {
name: item.name,
type: 'line',
smooth: false,
symbolSize: 3,
lineStyle: {
width: e === 'windDirection' ? 0 : 2
},
data: item.data.map(function (a, dataIndex) {
return e === 'windDirection' ? {
parm: e,
value: _this3.$props.parm.includes('windLevel') ? _this3.$props.data['windLevel'][idx].data[dataIndex] : 0,
symbolSize: 0,
label: {
show: true,
width: 15,
height: 15,
distance: 0,
rotate: a,
color: 'rgba(0,0,0,0)',
verticalAlign: 'middle',
zlevel: 10,
backgroundColor: {
image: _enum.WIND
}
}
} : {
parm: e,
value: a,
symbol: _this3.$props.parm.includes('windDirection') ? 'none' : 'emptyCircle'
};
})
};
});
}));
var toolbox = {
show: true,
right: '15%',
top: '2%',
iconStyle: {
color: lineTextColor
},
emphasis: {
iconStyle: {
color: lineTextColor
}
},
feature: {
myFull: {
show: true,
title: '全屏',
icon: 'path://M20.26,9.35a1,1,0,0,1-1-1V5.77a1,1,0,0,0-1-1H15.68a1,1,0,0,1,0-2h2.58a3.009,3.009,0,0,1,3,3V8.35A1,1,0,0,1,20.26,9.35Z M18.26,21.25H15.68a1,1,0,0,1,0-2h2.58a1,1,0,0,0,1-1V15.67a1,1,0,1,1,2,0v2.58A3.009,3.009,0,0,1,18.26,21.25Z M3.76,9.35a1,1,0,0,1-1-1V5.77a3.009,3.009,0,0,1,3-3H8.34a1,1,0,0,1,0,2H5.76a1,1,0,0,0-1,1V8.35a1,1,0,0,1-1,1Z M8.34,21.25H5.76a3.009,3.009,0,0,1-3-3V15.67a1,1,0,0,1,2,0v2.58a1,1,0,0,0,1,1H8.34a1,1,0,0,1,0,2Z',
onclick: function onclick(e) {
_this3.visible = true;
setTimeout(function () {
var dom = _this3.$refs['single-fullscreen-line'];
_this3.renderChartView(_this3.chart, dom, true);
});
}
}
}
};
var options = {
tooltip: tooltip,
// visualMap,
grid: {
right: visualMap ? '15%' : '5%'
},
title: {
top: '2%',
left: '10%',
text: this.title,
textStyle: {
color: lineTextColor
}
},
xAxis: {
type: 'category',
data: this.$props.time,
axisLabel: {
color: lineTextColor
},
boundaryGap: false
},
yAxis: {
type: 'value',
nameTextStyle: {
color: lineTextColor
},
axisLabel: {
color: lineTextColor
},
splitLine: {
lineStyle: {
color: lineTextColor
}
},
axisLine: {
show: true,
lineStyle: {
color: lineTextColor
}
}
},
series: series
};
visualMap && (options.visualMap = visualMap);
!isFullScreen && (options.toolbox = toolbox);
chart.setOption(this.$props.time.length > 20 ? (0, _extends3['default'])(options, {
dataZoom: dataZoom
}) : options);
},
fullExit: function fullExit() {
this.visible = false;
}
},
beforeDestroy: function beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize);
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
if (this.chartBigger) {
this.chartBigger.dispose();
this.chartBigger = null;
}
},
render: function render() {
var _this4 = this;
var h = arguments[0];
return h(
'div',
{ ref: 'single-line' },
[h(
'a-modal',
{
attrs: {
visible: this.visible,
width: '100vw',
footer: null,
maskClosable: false,
dialogClass: 'fullScreen-modal'
},
on: {
'cancel': function cancel() {
return _this4.fullExit();
}
}
},
[h('div', { 'class': 'single-fullscreen-line', ref: 'single-fullscreen-line' })]
)]
);
}
};