forked from github/dataease
refactor: 视图明细导出优化 (#2093)
Co-authored-by: wangjiahao <1522128093@qq.com>
This commit is contained in:
fit2cloudrd
GitHub
parent
ed760b19bc
commit
bb98e0c4e7
@ -468,7 +468,7 @@ public class PanelGroupService {
|
||||
details.add(0,request.getHeader());
|
||||
HSSFWorkbook wb = new HSSFWorkbook();
|
||||
//明细sheet
|
||||
HSSFSheet detailsSheet = wb.createSheet("视图明细");
|
||||
HSSFSheet detailsSheet = wb.createSheet("数据");
|
||||
|
||||
//给单元格设置样式
|
||||
CellStyle cellStyle = wb.createCellStyle();
|
||||
@ -503,7 +503,7 @@ public class PanelGroupService {
|
||||
}
|
||||
if(StringUtils.isNotEmpty(snapshot)){
|
||||
//截图sheet 1px ≈ 2.33dx ≈ 0.48 dy 8*24 个单元格
|
||||
HSSFSheet snapshotSheet = wb.createSheet("截图");
|
||||
HSSFSheet snapshotSheet = wb.createSheet("图表");
|
||||
short reDefaultRowHeight = (short)Math.round(request.getSnapshotHeight()*3.5/8);
|
||||
int reDefaultColumnWidth = (int)Math.round(request.getSnapshotWidth()*0.25/24);
|
||||
snapshotSheet.setDefaultColumnWidth(reDefaultColumnWidth);
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
{{ $t('chart.export_details') }}
|
||||
</el-button>
|
||||
</span>
|
||||
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
|
||||
<UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
|
||||
</el-dialog>
|
||||
|
||||
<!--手机视图详情-->
|
||||
|
||||
@ -156,7 +156,7 @@
|
||||
{{ $t('chart.export_details') }}
|
||||
</el-button>
|
||||
</span>
|
||||
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
|
||||
<UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<de-aside-container v-if="showChartCanvas">
|
||||
<div id="chartCanvas" :style="customStyle">
|
||||
<div id="chartCanvas" class="canvas-class" :style="customStyle">
|
||||
<div class="canvas-class" :style="commonStyle">
|
||||
<plugin-com
|
||||
v-if="chart.isPlugin"
|
||||
:component-name="chart.type + '-view'"
|
||||
@ -14,6 +15,7 @@
|
||||
<label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
|
||||
<label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" />
|
||||
</div>
|
||||
</div>
|
||||
</de-aside-container>
|
||||
<de-main-container>
|
||||
<table-normal :chart="chartTable" :show-summary="false" class="table-class" />
|
||||
@ -37,6 +39,9 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
|
||||
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
|
||||
import { exportDetails } from '@/api/panel/panel'
|
||||
import html2canvas from 'html2canvasde'
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import { get } from '@/api/system/dynamic'
|
||||
export default {
|
||||
name: 'UserView',
|
||||
components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
|
||||
@ -52,7 +57,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
refId: null
|
||||
refId: null,
|
||||
element: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -61,7 +67,6 @@ export default {
|
||||
},
|
||||
customStyle() {
|
||||
let style = {
|
||||
height: '100%'
|
||||
}
|
||||
if (this.canvasStyleData.openCommonStyle) {
|
||||
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
|
||||
@ -81,6 +86,25 @@ export default {
|
||||
}
|
||||
return style
|
||||
},
|
||||
commonStyle() {
|
||||
const style = {}
|
||||
if (this.element && this.element.commonBackground) {
|
||||
style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px'
|
||||
style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
|
||||
if (this.element.commonBackground.enable) {
|
||||
if (this.element.commonBackground.backgroundType === 'innerImage') {
|
||||
const innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
|
||||
style['background'] = `url(${innerImage}) no-repeat`
|
||||
} else if (this.element.commonBackground.backgroundType === 'outerImage') {
|
||||
style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
|
||||
} else if (this.element.commonBackground.backgroundType === 'color') {
|
||||
style['background-color'] = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
|
||||
}
|
||||
}
|
||||
style['overflow'] = 'hidden'
|
||||
}
|
||||
return style
|
||||
},
|
||||
...mapState([
|
||||
'isClickComponent',
|
||||
'curComponent',
|
||||
@ -88,6 +112,9 @@ export default {
|
||||
'canvasStyleData'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
this.element = deepCopy(this.curComponent)
|
||||
},
|
||||
methods: {
|
||||
exportExcel() {
|
||||
const _this = this
|
||||
@ -118,7 +145,7 @@ export default {
|
||||
const link = document.createElement('a')
|
||||
link.style.display = 'none'
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = excelName // 下载的文件名
|
||||
link.download = excelName + '.xlsx' // 下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
@ -150,4 +177,9 @@ export default {
|
||||
.table-class{
|
||||
height: 100%;
|
||||
}
|
||||
.canvas-class{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user