'use strict';
|
|
// 页面中的表格
|
Vue.component('b-table', {
|
props: {
|
columns: {
|
type: Array,
|
default: function _default() {
|
return [];
|
}
|
},
|
data: {
|
type: Array,
|
default: function _default() {
|
return [];
|
}
|
},
|
title: String,
|
default: ''
|
},
|
template: '\n <div class="tbl-container ml8 mr8">\n <div class="tbl-container-header" v-show="showHeader">{{title}}</div>\n <div class="tbl-content">\n <table class="bui-table bui-table-odd">\n <thead>\n <tr>\n <th v-for="column in columns" :key="column.key">{{column.title}}</th>\n </tr>\n </thead>\n <tbody>\n <tr v-for="(item, key) in data" @click="handerTrClick(item)">\n <td v-for="column in columns" :key="column.key">{{item[column.key]}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n ',
|
data: function data() {
|
return {};
|
},
|
|
methods: {
|
handerTrClick: function handerTrClick(item) {
|
this.$emit('on-click-tr', item);
|
}
|
},
|
computed: {
|
showHeader: function showHeader() {
|
var result = this.title ? true : false;
|
return result;
|
}
|
}
|
});
|
// iview的table
|
Vue.component('iview-table', {
|
props: {
|
columns: {
|
type: Array,
|
default: function _default() {
|
return [];
|
}
|
},
|
data: {
|
type: Array,
|
default: function _default() {
|
return [];
|
}
|
},
|
height: {
|
type: [String, Number],
|
default: 'auto'
|
},
|
title: String,
|
default: ''
|
},
|
template: '\n <div class="tbl-container ml8 mr8">\n <div class="tbl-container-header" v-show="showHeader">{{title}}</div>\n <div class="tbl-content">\n <i-table\n :columns="columns"\n :data="data"\n :height="height"\n stripe\n border></i-table>\n </div>\n </div>\n ',
|
data: function data() {
|
return {};
|
},
|
|
methods: {
|
handerTrClick: function handerTrClick(item) {
|
this.$emit('on-click-tr', item);
|
}
|
},
|
computed: {
|
showHeader: function showHeader() {
|
var result = this.title ? true : false;
|
return result;
|
}
|
}
|
});
|
|
Vue.component('bui-list', {
|
props: {
|
data: {
|
type: Array,
|
default: function _default() {
|
return [];
|
}
|
}
|
},
|
template: '\n <div class="bui-list-container">\n <div class="bui-list-header">\u8BBE\u5907\u4FE1\u606F\u5217\u8868</div>\n <div class="bui-list-content">\n <ul class="bui-list">\n <li \n v-for="(item, key) in data"\n :key="key"\n class="bui-btn bui-box"\n @click="handlerClick(item, key)">\n <div class="span1">\n <h3 class="item-title" :style="getTStyle(item)">{{item.title}}</h3>\n <p\n v-for="(list, lkey) in item.list"\n :key="lkey" \n class="item-text">\n <span class="bui-label">{{list.label}}</span>\n <span class="bui-value">{{list.value}}</span>\n </p>\n </div>\n <i class="icon-listright"></i>\n </li>\n </ul>\n </div>\n </div>\n ',
|
methods: {
|
getTStyle: function getTStyle(item) {
|
var style = {};
|
if (typeof item.list == 'undefined' || item.list.length == 0) {
|
style = {
|
marginBottom: 0
|
};
|
}
|
return style;
|
},
|
handlerClick: function handlerClick(data, key) {
|
this.$emit('on-click', data);
|
}
|
},
|
computed: {}
|
});
|
|
Vue.component('bar-chart', {
|
props: {
|
width: {
|
type: String,
|
default: 'auto'
|
},
|
height: {
|
type: String,
|
default: '100px'
|
},
|
'showValue': {
|
type: Boolean,
|
default: true
|
},
|
range: {
|
type: Object,
|
default: function _default(range) {
|
var result = {
|
min: 0,
|
minFlag: false,
|
max: 1,
|
maxFlag: false
|
};
|
return result;
|
}
|
},
|
colors: {
|
type: Object,
|
default: function _default(option) {
|
var defaults = {
|
normal: '#5cadff',
|
max: '#19be6b',
|
min: '#ed4014'
|
};
|
var colors = {};
|
if (option) {
|
colors = $.extend({}, defaults, option);
|
} else {
|
colors = defaults;
|
}
|
return colors;
|
}
|
}
|
},
|
template: '\n <div class="bar-echart">\n <div class="echart" :style="style"></div>\n </div>\n ',
|
data: function data() {
|
return {
|
graph: '',
|
style: {
|
width: this.width,
|
height: this.height
|
},
|
option: {}
|
};
|
},
|
|
methods: {
|
setOption: function setOption(opt) {
|
var self = this;
|
var defaults = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
left: '1%',
|
right: '1%',
|
bottom: '2%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: []
|
},
|
yAxis: {
|
type: 'value',
|
min: 0,
|
max: 1,
|
splitLine: {
|
show: false
|
}
|
},
|
series: []
|
};
|
this.option = $.extend(true, {}, defaults, opt);
|
|
// 设置图谱显示范围
|
this._setRange();
|
|
// 设置文本
|
this._setLabel();
|
|
// 设置柱状图的颜色
|
this._setColor();
|
|
this.graph.resize();
|
this.graph.setOption(this.option, true);
|
},
|
_setRange: function _setRange() {
|
// 设置范围
|
var option = this.option;
|
var series = option.series;
|
// option的最值进行处理
|
if (series.length == 0 || series[0].data.length == 0) {
|
option.yAxis.min = 0;
|
option.yAxis.max = 1;
|
} else {
|
var data = series[0].data;
|
var min = getMinFromArr(data);
|
var max = getMaxFromArr(data);
|
// 设置最小值
|
if (this.range.minFlag == false || this.range.min == undefined) {
|
min = Math.floor(min * 0.9);
|
} else {
|
min = this.range.min > min ? Math.floor(min * 0.9) : this.range.min;
|
}
|
|
// 设置最大值
|
if (this.range.maxFlag == false || this.range.max == undefined) {
|
max = Number((max * 1.15).toFixed(1));
|
} else {
|
max = this.range.max < max ? Number((max * 1.15).toFixed(1)) : this.range.max;
|
}
|
option.yAxis.min = min;
|
option.yAxis.max = max;
|
}
|
},
|
_setColor: function _setColor() {
|
// 设置颜色
|
var option = this.option;
|
var colors = this.colors;
|
var series = option.series[0];
|
if (series) {
|
var data = series.data;
|
if (series.itemStyle == undefined) {
|
series.itemStyle = {};
|
series.itemStyle.normal = {};
|
}
|
var maxflag = true;
|
var minflag = true;
|
series.itemStyle.normal.color = function setColor(value) {
|
var min = getMinFromArr(data);
|
var max = getMaxFromArr(data);
|
if (value.value == max) {
|
return colors.max;
|
} else if (value.value == min) {
|
return colors.min;
|
} else {
|
return colors.normal;
|
}
|
};
|
}
|
},
|
_setLabel: function _setLabel() {
|
var option = this.option;
|
var series = option.series[0];
|
if (series) {
|
if (series.itemStyle == undefined) {
|
series.itemStyle = {};
|
series.itemStyle.normal = {};
|
}
|
series.itemStyle.normal.label = {
|
show: this.showValue,
|
position: 'top'
|
};
|
}
|
},
|
resize: function resize() {
|
var option = this.graph.getOption();
|
this.setOption(option);
|
}
|
},
|
mounted: function mounted() {
|
// console.log(this.$el);
|
var $root = $(this.$el);
|
var graphEl = $root.find('.echart').get(0);
|
this.graph = echarts.init(graphEl);
|
this.graph.setOption({});
|
}
|
});
|
|
Vue.component('high-bar-chart', {
|
props: {
|
id: {
|
type: String,
|
required: true
|
},
|
name: {
|
type: String,
|
default: ''
|
},
|
unit: {
|
type: String,
|
default: ''
|
},
|
title: {
|
type: String,
|
default: ''
|
},
|
subtitle: {
|
type: String,
|
default: ''
|
},
|
height: {
|
type: String,
|
default: '200px'
|
},
|
colors: {
|
type: Object,
|
default: function _default() {
|
return {};
|
}
|
}
|
},
|
template: '\n <div class="high-chart-container">\n <div :id="id" class="high-chart" :style="getStyle"></div>\n </div>\n ',
|
data: function data() {
|
return {
|
chart: ''
|
};
|
},
|
|
watch: {
|
height: function height(value) {
|
this.chart.setSize(undefined, value);
|
}
|
},
|
methods: {
|
init: function init() {
|
var self = this;
|
var yText = this.name + this.getUnit();
|
this.chart = Highcharts.chart(this.id, {
|
chart: {
|
type: 'column'
|
},
|
credits: { // 版本信息
|
enabled: false
|
},
|
legend: { // 指示
|
enabled: false
|
},
|
title: {
|
text: this.title
|
},
|
subtitle: {
|
text: this.subtitle
|
},
|
xAxis: [{
|
categories: [],
|
crosshair: true
|
}],
|
yAxis: [{
|
title: {
|
text: yText
|
},
|
lineWidth: 1
|
}],
|
tooltip: {},
|
plotOptions: {
|
column: {
|
borderWidth: 0
|
}
|
},
|
series: [{
|
name: this.name,
|
data: [],
|
dataLabels: {
|
enabled: true
|
}
|
}]
|
});
|
},
|
setOption: function setOption(options) {
|
var categories = options.categories;
|
var data = options.data;
|
this.setCategories(categories);
|
this.setExtremes(null, null);
|
this.setData(data);
|
},
|
setCategories: function setCategories(categories) {
|
this.chart.xAxis[0].setCategories(categories, false); // 不更新
|
},
|
setExtremes: function setExtremes(min, max) {
|
this.chart.yAxis[0].setExtremes(min, max, false); // 不更新
|
},
|
setData: function setData(data) {
|
var result = [];
|
var max = getMaxFromArr(data);
|
var min = getMinFromArr(data);
|
var colors = this.getColors();
|
for (var i = 0; i < data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
y: _data
|
};
|
if (_data == min) {
|
tmp.color = colors.min;
|
} else if (_data == max) {
|
tmp.color = colors.max;
|
} else {
|
tmp.color = colors.normal;
|
}
|
result.push(tmp);
|
}
|
this.chart.series[0].setData(result);
|
},
|
getUnit: function getUnit() {
|
// 格式化单位
|
var unit = this.unit ? '（' + this.unit + '）' : '';
|
return unit;
|
},
|
getColors: function getColors() {
|
var defaults = {
|
min: '#ed4014',
|
max: '#19be6b',
|
normal: '#2db7f5'
|
};
|
var colors = this.colors;
|
var result = $.extend({}, defaults, colors);
|
return result;
|
}
|
},
|
computed: {
|
getStyle: function getStyle() {
|
return {
|
height: this.height
|
};
|
}
|
},
|
mounted: function mounted() {
|
var self = this;
|
this.init();
|
}
|
});
|
