|
|
|
@ -38,11 +38,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
<el-row v-show="chart.type === 'table-info'" class="table-page">
|
|
|
|
<el-row v-show="chart.type === 'table-info'" class="table-page">
|
|
|
|
<span class="total-style">
|
|
|
|
<span class="total-style">
|
|
|
|
{{ $t("chart.total") }}
|
|
|
|
{{ $t('chart.total') }}
|
|
|
|
<span>{{
|
|
|
|
<span>{{
|
|
|
|
chart.data && chart.data.tableRow ? chart.data.tableRow.length : 0
|
|
|
|
chart.data && chart.data.tableRow ? chart.data.tableRow.length : 0
|
|
|
|
}}</span>
|
|
|
|
}}</span>
|
|
|
|
{{ $t("chart.items") }}
|
|
|
|
{{ $t('chart.items') }}
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<el-pagination
|
|
|
|
<el-pagination
|
|
|
|
small
|
|
|
|
small
|
|
|
|
@ -62,198 +62,212 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { hexColorToRGBA } from "../../chart/util";
|
|
|
|
import { hexColorToRGBA } from '../../chart/util'
|
|
|
|
import eventBus from "@/components/canvas/utils/eventBus";
|
|
|
|
import eventBus from '@/components/canvas/utils/eventBus'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: "TableNormal",
|
|
|
|
name: 'TableNormal',
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
chart: {
|
|
|
|
chart: {
|
|
|
|
type: Object,
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
required: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
filter: {
|
|
|
|
filter: {
|
|
|
|
type: Object,
|
|
|
|
type: Object,
|
|
|
|
required: false,
|
|
|
|
required: false,
|
|
|
|
default: function() {
|
|
|
|
default: function() {
|
|
|
|
return {};
|
|
|
|
return {}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
showSummary: {
|
|
|
|
showSummary: {
|
|
|
|
type: Boolean,
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
fields: [],
|
|
|
|
fields: [],
|
|
|
|
height: "auto",
|
|
|
|
height: 'auto',
|
|
|
|
title_class: {
|
|
|
|
title_class: {
|
|
|
|
margin: "0 0",
|
|
|
|
margin: '0 0',
|
|
|
|
width: "100%",
|
|
|
|
width: '100%',
|
|
|
|
fontSize: "18px",
|
|
|
|
fontSize: '18px',
|
|
|
|
color: "#303133",
|
|
|
|
color: '#303133',
|
|
|
|
textAlign: "left",
|
|
|
|
textAlign: 'left',
|
|
|
|
fontStyle: "normal",
|
|
|
|
fontStyle: 'normal',
|
|
|
|
fontWeight: "normal",
|
|
|
|
fontWeight: 'normal'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// bg_class: {
|
|
|
|
// bg_class: {
|
|
|
|
// background: hexColorToRGBA('#ffffff', 0),
|
|
|
|
// background: hexColorToRGBA('#ffffff', 0),
|
|
|
|
// borderRadius: this.borderRadius
|
|
|
|
// borderRadius: this.borderRadius
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
table_header_class: {
|
|
|
|
table_header_class: {
|
|
|
|
fontSize: "12px",
|
|
|
|
fontSize: '12px',
|
|
|
|
color: "#606266",
|
|
|
|
color: '#606266',
|
|
|
|
background: "#e8eaec",
|
|
|
|
background: '#e8eaec',
|
|
|
|
height: "36px",
|
|
|
|
height: '36px'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
table_item_class: {
|
|
|
|
table_item_class: {
|
|
|
|
fontSize: "12px",
|
|
|
|
fontSize: '12px',
|
|
|
|
color: "#606266",
|
|
|
|
color: '#606266',
|
|
|
|
background: "#ffffff",
|
|
|
|
background: '#ffffff',
|
|
|
|
height: "36px",
|
|
|
|
height: '36px'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
table_item_class_stripe: {
|
|
|
|
table_item_class_stripe: {
|
|
|
|
fontSize: "12px",
|
|
|
|
fontSize: '12px',
|
|
|
|
color: "#606266",
|
|
|
|
color: '#606266',
|
|
|
|
background: "#ffffff",
|
|
|
|
background: '#ffffff',
|
|
|
|
height: "36px",
|
|
|
|
height: '36px'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
title_show: true,
|
|
|
|
title_show: true,
|
|
|
|
borderRadius: "0px",
|
|
|
|
borderRadius: '0px',
|
|
|
|
currentPage: {
|
|
|
|
currentPage: {
|
|
|
|
page: 1,
|
|
|
|
page: 1,
|
|
|
|
pageSize: 10,
|
|
|
|
pageSize: 10,
|
|
|
|
show: 0,
|
|
|
|
show: 0
|
|
|
|
},
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
bg_class() {
|
|
|
|
bg_class() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
background: hexColorToRGBA("#ffffff", 0),
|
|
|
|
background: hexColorToRGBA('#ffffff', 0),
|
|
|
|
borderRadius: this.borderRadius,
|
|
|
|
borderRadius: this.borderRadius
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
watch: {
|
|
|
|
chart: function() {
|
|
|
|
chart: function() {
|
|
|
|
this.init();
|
|
|
|
this.init()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
this.init();
|
|
|
|
this.init()
|
|
|
|
// 监听元素变动事件
|
|
|
|
// 监听元素变动事件
|
|
|
|
eventBus.$on("resizing", (componentId) => {
|
|
|
|
eventBus.$on('resizing', (componentId) => {
|
|
|
|
this.chartResize();
|
|
|
|
this.chartResize()
|
|
|
|
});
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
init() {
|
|
|
|
init() {
|
|
|
|
this.resetHeight();
|
|
|
|
this.resetHeight()
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.initData();
|
|
|
|
this.initData()
|
|
|
|
this.calcHeightDelay();
|
|
|
|
this.calcHeightDelay()
|
|
|
|
});
|
|
|
|
})
|
|
|
|
this.setBackGroundBorder();
|
|
|
|
this.setBackGroundBorder()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setBackGroundBorder() {
|
|
|
|
setBackGroundBorder() {
|
|
|
|
if (this.chart.customStyle) {
|
|
|
|
if (this.chart.customStyle) {
|
|
|
|
const customStyle = JSON.parse(this.chart.customStyle);
|
|
|
|
const customStyle = JSON.parse(this.chart.customStyle)
|
|
|
|
if (customStyle.background) {
|
|
|
|
if (customStyle.background) {
|
|
|
|
this.borderRadius = (customStyle.background.borderRadius || 0) + "px";
|
|
|
|
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
initData() {
|
|
|
|
initData() {
|
|
|
|
const that = this;
|
|
|
|
const that = this
|
|
|
|
let datas = [];
|
|
|
|
let datas = []
|
|
|
|
if (this.chart.data) {
|
|
|
|
if (this.chart.data) {
|
|
|
|
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields));
|
|
|
|
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
|
|
|
|
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow));
|
|
|
|
const yAxis = JSON.parse(this.chart.yaxis)
|
|
|
|
if (this.chart.type === "table-info") {
|
|
|
|
if (yAxis && yAxis.length > 0) {
|
|
|
|
|
|
|
|
yAxis.forEach((item) => {
|
|
|
|
|
|
|
|
console.log(11, item)
|
|
|
|
|
|
|
|
if (item.summary == 'ratio') {
|
|
|
|
|
|
|
|
this.chart.data.tableRow.forEach((tableRow) => {
|
|
|
|
|
|
|
|
console.log(33, tableRow)
|
|
|
|
|
|
|
|
tableRow[item.dataeaseName] += '%'
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log(321123, yAxis)
|
|
|
|
|
|
|
|
console.log(123123, this.chart)
|
|
|
|
|
|
|
|
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
|
|
|
|
|
|
|
|
if (this.chart.type === 'table-info') {
|
|
|
|
// 计算分页
|
|
|
|
// 计算分页
|
|
|
|
this.currentPage.show = datas.length;
|
|
|
|
this.currentPage.show = datas.length
|
|
|
|
const pageStart =
|
|
|
|
const pageStart =
|
|
|
|
(this.currentPage.page - 1) * this.currentPage.pageSize;
|
|
|
|
(this.currentPage.page - 1) * this.currentPage.pageSize
|
|
|
|
const pageEnd = pageStart + this.currentPage.pageSize;
|
|
|
|
const pageEnd = pageStart + this.currentPage.pageSize
|
|
|
|
datas = datas.slice(pageStart, pageEnd);
|
|
|
|
datas = datas.slice(pageStart, pageEnd)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.fields = [];
|
|
|
|
this.fields = []
|
|
|
|
datas = [];
|
|
|
|
datas = []
|
|
|
|
this.resetPage();
|
|
|
|
this.resetPage()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.$refs.plxTable.reloadData(datas);
|
|
|
|
this.$refs.plxTable.reloadData(datas)
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.initStyle();
|
|
|
|
this.initStyle()
|
|
|
|
});
|
|
|
|
})
|
|
|
|
window.onresize = function() {
|
|
|
|
window.onresize = function() {
|
|
|
|
that.calcHeightDelay();
|
|
|
|
that.calcHeightDelay()
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
calcHeightRightNow() {
|
|
|
|
calcHeightRightNow() {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
if (this.$refs.tableContainer) {
|
|
|
|
if (this.$refs.tableContainer) {
|
|
|
|
let pageHeight = 0;
|
|
|
|
let pageHeight = 0
|
|
|
|
if (this.chart.type === "table-info") {
|
|
|
|
if (this.chart.type === 'table-info') {
|
|
|
|
pageHeight = 36;
|
|
|
|
pageHeight = 36
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const currentHeight = this.$refs.tableContainer.offsetHeight;
|
|
|
|
const currentHeight = this.$refs.tableContainer.offsetHeight
|
|
|
|
const tableMaxHeight =
|
|
|
|
const tableMaxHeight =
|
|
|
|
currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight;
|
|
|
|
currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
|
|
|
|
let tableHeight;
|
|
|
|
let tableHeight
|
|
|
|
if (this.chart.data) {
|
|
|
|
if (this.chart.data) {
|
|
|
|
if (this.chart.type === "table-info") {
|
|
|
|
if (this.chart.type === 'table-info') {
|
|
|
|
tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight;
|
|
|
|
tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
tableHeight =
|
|
|
|
tableHeight =
|
|
|
|
(this.chart.data.tableRow.length + 2) * 36 - pageHeight;
|
|
|
|
(this.chart.data.tableRow.length + 2) * 36 - pageHeight
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
tableHeight = 0;
|
|
|
|
tableHeight = 0
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (tableHeight > tableMaxHeight) {
|
|
|
|
if (tableHeight > tableMaxHeight) {
|
|
|
|
this.height = tableMaxHeight + "px";
|
|
|
|
this.height = tableMaxHeight + 'px'
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.height = "auto";
|
|
|
|
this.height = 'auto'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
calcHeightDelay() {
|
|
|
|
calcHeightDelay() {
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.calcHeightRightNow();
|
|
|
|
this.calcHeightRightNow()
|
|
|
|
}, 100);
|
|
|
|
}, 100)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
initStyle() {
|
|
|
|
initStyle() {
|
|
|
|
if (this.chart.customAttr) {
|
|
|
|
if (this.chart.customAttr) {
|
|
|
|
const customAttr = JSON.parse(this.chart.customAttr);
|
|
|
|
const customAttr = JSON.parse(this.chart.customAttr)
|
|
|
|
if (customAttr.color) {
|
|
|
|
if (customAttr.color) {
|
|
|
|
this.table_header_class.color = customAttr.color.tableFontColor;
|
|
|
|
this.table_header_class.color = customAttr.color.tableFontColor
|
|
|
|
this.table_header_class.background = hexColorToRGBA(
|
|
|
|
this.table_header_class.background = hexColorToRGBA(
|
|
|
|
customAttr.color.tableHeaderBgColor,
|
|
|
|
customAttr.color.tableHeaderBgColor,
|
|
|
|
customAttr.color.alpha
|
|
|
|
customAttr.color.alpha
|
|
|
|
);
|
|
|
|
)
|
|
|
|
this.table_item_class.color = customAttr.color.tableFontColor;
|
|
|
|
this.table_item_class.color = customAttr.color.tableFontColor
|
|
|
|
this.table_item_class.background = hexColorToRGBA(
|
|
|
|
this.table_item_class.background = hexColorToRGBA(
|
|
|
|
customAttr.color.tableItemBgColor,
|
|
|
|
customAttr.color.tableItemBgColor,
|
|
|
|
customAttr.color.alpha
|
|
|
|
customAttr.color.alpha
|
|
|
|
);
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (customAttr.size) {
|
|
|
|
if (customAttr.size) {
|
|
|
|
this.table_header_class.fontSize =
|
|
|
|
this.table_header_class.fontSize =
|
|
|
|
customAttr.size.tableTitleFontSize + "px";
|
|
|
|
customAttr.size.tableTitleFontSize + 'px'
|
|
|
|
this.table_item_class.fontSize =
|
|
|
|
this.table_item_class.fontSize =
|
|
|
|
customAttr.size.tableItemFontSize + "px";
|
|
|
|
customAttr.size.tableItemFontSize + 'px'
|
|
|
|
this.table_header_class.height =
|
|
|
|
this.table_header_class.height =
|
|
|
|
customAttr.size.tableTitleHeight + "px";
|
|
|
|
customAttr.size.tableTitleHeight + 'px'
|
|
|
|
this.table_item_class.height = customAttr.size.tableItemHeight + "px";
|
|
|
|
this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.table_item_class_stripe = JSON.parse(
|
|
|
|
this.table_item_class_stripe = JSON.parse(
|
|
|
|
JSON.stringify(this.table_item_class)
|
|
|
|
JSON.stringify(this.table_item_class)
|
|
|
|
);
|
|
|
|
)
|
|
|
|
// 暂不支持斑马纹
|
|
|
|
// 暂不支持斑马纹
|
|
|
|
// if (customAttr.color.tableStripe) {
|
|
|
|
// if (customAttr.color.tableStripe) {
|
|
|
|
// // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
|
|
|
|
// // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
|
|
|
|
@ -266,121 +280,133 @@ export default {
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (this.chart.customStyle) {
|
|
|
|
if (this.chart.customStyle) {
|
|
|
|
const customStyle = JSON.parse(this.chart.customStyle);
|
|
|
|
const customStyle = JSON.parse(this.chart.customStyle)
|
|
|
|
if (customStyle.text) {
|
|
|
|
if (customStyle.text) {
|
|
|
|
this.title_show = customStyle.text.show;
|
|
|
|
this.title_show = customStyle.text.show
|
|
|
|
this.title_class.fontSize = customStyle.text.fontSize + "px";
|
|
|
|
this.title_class.fontSize = customStyle.text.fontSize + 'px'
|
|
|
|
this.title_class.color = customStyle.text.color;
|
|
|
|
this.title_class.color = customStyle.text.color
|
|
|
|
this.title_class.textAlign = customStyle.text.hPosition;
|
|
|
|
this.title_class.textAlign = customStyle.text.hPosition
|
|
|
|
this.title_class.fontStyle = customStyle.text.isItalic
|
|
|
|
this.title_class.fontStyle = customStyle.text.isItalic
|
|
|
|
? "italic"
|
|
|
|
? 'italic'
|
|
|
|
: "normal";
|
|
|
|
: 'normal'
|
|
|
|
this.title_class.fontWeight = customStyle.text.isBolder
|
|
|
|
this.title_class.fontWeight = customStyle.text.isBolder
|
|
|
|
? "bold"
|
|
|
|
? 'bold'
|
|
|
|
: "normal";
|
|
|
|
: 'normal'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (customStyle.background) {
|
|
|
|
if (customStyle.background) {
|
|
|
|
this.bg_class.background = hexColorToRGBA(
|
|
|
|
this.bg_class.background = hexColorToRGBA(
|
|
|
|
customStyle.background.color,
|
|
|
|
customStyle.background.color,
|
|
|
|
customStyle.background.alpha
|
|
|
|
customStyle.background.alpha
|
|
|
|
);
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 修改footer合计样式
|
|
|
|
// 修改footer合计样式
|
|
|
|
const table = document.getElementsByClassName(this.chart.id);
|
|
|
|
const table = document.getElementsByClassName(this.chart.id)
|
|
|
|
for (let i = 0; i < table.length; i++) {
|
|
|
|
for (let i = 0; i < table.length; i++) {
|
|
|
|
const s_table = table[i].getElementsByClassName("elx-table--footer");
|
|
|
|
const s_table = table[i].getElementsByClassName('elx-table--footer')
|
|
|
|
// console.log(s_table)
|
|
|
|
// console.log(s_table)
|
|
|
|
let s = "";
|
|
|
|
let s = ''
|
|
|
|
for (const i in this.table_header_class) {
|
|
|
|
for (const i in this.table_header_class) {
|
|
|
|
s +=
|
|
|
|
s +=
|
|
|
|
(i === "fontSize" ? "font-size" : i) +
|
|
|
|
(i === 'fontSize' ? 'font-size' : i) +
|
|
|
|
":" +
|
|
|
|
':' +
|
|
|
|
this.table_header_class[i] +
|
|
|
|
this.table_header_class[i] +
|
|
|
|
";";
|
|
|
|
';'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// console.log(s_table)
|
|
|
|
// console.log(s_table)
|
|
|
|
for (let i = 0; i < s_table.length; i++) {
|
|
|
|
for (let i = 0; i < s_table.length; i++) {
|
|
|
|
s_table[i].setAttribute("style", s);
|
|
|
|
s_table[i].setAttribute('style', s)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getRowStyle({ row, rowIndex }) {
|
|
|
|
getRowStyle({ row, rowIndex }) {
|
|
|
|
if (rowIndex % 2 !== 0) {
|
|
|
|
if (rowIndex % 2 !== 0) {
|
|
|
|
return this.table_item_class_stripe;
|
|
|
|
return this.table_item_class_stripe
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
return this.table_item_class;
|
|
|
|
return this.table_item_class
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
summaryMethod({ columns, data }) {
|
|
|
|
summaryMethod({ columns, data }) {
|
|
|
|
const that = this;
|
|
|
|
const that = this
|
|
|
|
const means = []; // 合计
|
|
|
|
const means = [] // 合计
|
|
|
|
columns.forEach((column, columnIndex) => {
|
|
|
|
columns.forEach((column, columnIndex) => {
|
|
|
|
if (columnIndex === 0) {
|
|
|
|
if (columnIndex === 0) {
|
|
|
|
means.push("合计");
|
|
|
|
means.push('合计')
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
|
|
|
|
let isRatio = false
|
|
|
|
if (
|
|
|
|
if (
|
|
|
|
columnIndex >=
|
|
|
|
columnIndex >=
|
|
|
|
that.chart.data.fields.length - that.chart.data.series.length
|
|
|
|
that.chart.data.fields.length - that.chart.data.series.length
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
const values = data.map((item) => Number(item[column.property]));
|
|
|
|
const values = data.map((item) => {
|
|
|
|
|
|
|
|
let a = item[column.property]
|
|
|
|
|
|
|
|
if (a.indexOf('%') >= 0) {
|
|
|
|
|
|
|
|
a = a.replace('%', '')
|
|
|
|
|
|
|
|
isRatio = true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return Number(a)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 合计
|
|
|
|
// 合计
|
|
|
|
if (!values.every((value) => isNaN(value))) {
|
|
|
|
if (!values.every((value) => isNaN(value))) {
|
|
|
|
means[columnIndex] = values.reduce((prev, curr) => {
|
|
|
|
means[columnIndex] = values.reduce((prev, curr) => {
|
|
|
|
const value = Number(curr);
|
|
|
|
const value = Number(curr)
|
|
|
|
if (!isNaN(value)) {
|
|
|
|
if (!isNaN(value)) {
|
|
|
|
return prev + curr;
|
|
|
|
return prev + curr
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
return prev;
|
|
|
|
return prev
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, 0);
|
|
|
|
}, 0)
|
|
|
|
means[columnIndex] = (means[columnIndex] + "").includes(".")
|
|
|
|
means[columnIndex] = (means[columnIndex] + '').includes('.')
|
|
|
|
? means[columnIndex].toFixed(2)
|
|
|
|
? means[columnIndex].toFixed(2)
|
|
|
|
: means[columnIndex];
|
|
|
|
: means[columnIndex]
|
|
|
|
|
|
|
|
if (isRatio) {
|
|
|
|
|
|
|
|
means[columnIndex] += '%'
|
|
|
|
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
means[columnIndex] = "";
|
|
|
|
means[columnIndex] = ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
means[columnIndex] = "";
|
|
|
|
means[columnIndex] = ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
})
|
|
|
|
// 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)
|
|
|
|
// 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)
|
|
|
|
return [means];
|
|
|
|
return [means]
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
chartResize() {
|
|
|
|
chartResize() {
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
this.calcHeightDelay();
|
|
|
|
this.calcHeightDelay()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
initClass() {
|
|
|
|
initClass() {
|
|
|
|
return this.chart.id;
|
|
|
|
return this.chart.id
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
resetHeight() {
|
|
|
|
resetHeight() {
|
|
|
|
this.height = 100;
|
|
|
|
this.height = 100
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
pageChange(val) {
|
|
|
|
pageChange(val) {
|
|
|
|
this.currentPage.pageSize = val;
|
|
|
|
this.currentPage.pageSize = val
|
|
|
|
this.init();
|
|
|
|
this.init()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
pageClick(val) {
|
|
|
|
pageClick(val) {
|
|
|
|
this.currentPage.page = val;
|
|
|
|
this.currentPage.page = val
|
|
|
|
this.init();
|
|
|
|
this.init()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
resetPage() {
|
|
|
|
resetPage() {
|
|
|
|
this.currentPage = {
|
|
|
|
this.currentPage = {
|
|
|
|
page: 1,
|
|
|
|
page: 1,
|
|
|
|
pageSize: 10,
|
|
|
|
pageSize: 10,
|
|
|
|
show: 0,
|
|
|
|
show: 0
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|
|
