Unverified 提交 bb98e0c4 authored 作者: fit2cloudrd's avatar fit2cloudrd 提交者: GitHub

refactor: 视图明细导出优化 (#2093)

Co-authored-by: 's avatarwangjiahao <1522128093@qq.com>
上级 ed760b19
...@@ -468,7 +468,7 @@ public class PanelGroupService { ...@@ -468,7 +468,7 @@ public class PanelGroupService {
details.add(0,request.getHeader()); details.add(0,request.getHeader());
HSSFWorkbook wb = new HSSFWorkbook(); HSSFWorkbook wb = new HSSFWorkbook();
//明细sheet //明细sheet
HSSFSheet detailsSheet = wb.createSheet("视图明细"); HSSFSheet detailsSheet = wb.createSheet("数据");
//给单元格设置样式 //给单元格设置样式
CellStyle cellStyle = wb.createCellStyle(); CellStyle cellStyle = wb.createCellStyle();
...@@ -503,7 +503,7 @@ public class PanelGroupService { ...@@ -503,7 +503,7 @@ public class PanelGroupService {
} }
if(StringUtils.isNotEmpty(snapshot)){ if(StringUtils.isNotEmpty(snapshot)){
//截图sheet 1px ≈ 2.33dx ≈ 0.48 dy 8*24 个单元格 //截图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); short reDefaultRowHeight = (short)Math.round(request.getSnapshotHeight()*3.5/8);
int reDefaultColumnWidth = (int)Math.round(request.getSnapshotWidth()*0.25/24); int reDefaultColumnWidth = (int)Math.round(request.getSnapshotWidth()*0.25/24);
snapshotSheet.setDefaultColumnWidth(reDefaultColumnWidth); snapshotSheet.setDefaultColumnWidth(reDefaultColumnWidth);
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
{{ $t('chart.export_details') }} {{ $t('chart.export_details') }}
</el-button> </el-button>
</span> </span>
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" /> <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
</el-dialog> </el-dialog>
<!--手机视图详情--> <!--手机视图详情-->
......
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
{{ $t('chart.export_details') }} {{ $t('chart.export_details') }}
</el-button> </el-button>
</span> </span>
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" /> <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
</el-dialog> </el-dialog>
<el-dialog <el-dialog
......
<template> <template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]"> <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-aside-container v-if="showChartCanvas"> <de-aside-container v-if="showChartCanvas">
<div id="chartCanvas" :style="customStyle"> <div id="chartCanvas" class="canvas-class" :style="customStyle">
<plugin-com <div class="canvas-class" :style="commonStyle">
v-if="chart.isPlugin" <plugin-com
:component-name="chart.type + '-view'" v-if="chart.isPlugin"
:obj="{chart}" :component-name="chart.type + '-view'"
class="chart-class" :obj="{chart}"
/> class="chart-class"
<chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" /> />
<chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" /> <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
<chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" /> <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
<label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" /> <chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
<label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" /> <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> </div>
</de-aside-container> </de-aside-container>
<de-main-container> <de-main-container>
...@@ -37,6 +39,9 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2' ...@@ -37,6 +39,9 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText' import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
import { exportDetails } from '@/api/panel/panel' import { exportDetails } from '@/api/panel/panel'
import html2canvas from 'html2canvasde' 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 { export default {
name: 'UserView', name: 'UserView',
components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom }, components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
...@@ -52,7 +57,8 @@ export default { ...@@ -52,7 +57,8 @@ export default {
}, },
data() { data() {
return { return {
refId: null refId: null,
element: {}
} }
}, },
computed: { computed: {
...@@ -61,7 +67,6 @@ export default { ...@@ -61,7 +67,6 @@ export default {
}, },
customStyle() { customStyle() {
let style = { let style = {
height: '100%'
} }
if (this.canvasStyleData.openCommonStyle) { if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) { if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
...@@ -81,6 +86,25 @@ export default { ...@@ -81,6 +86,25 @@ export default {
} }
return style 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([ ...mapState([
'isClickComponent', 'isClickComponent',
'curComponent', 'curComponent',
...@@ -88,6 +112,9 @@ export default { ...@@ -88,6 +112,9 @@ export default {
'canvasStyleData' 'canvasStyleData'
]) ])
}, },
mounted() {
this.element = deepCopy(this.curComponent)
},
methods: { methods: {
exportExcel() { exportExcel() {
const _this = this const _this = this
...@@ -118,7 +145,7 @@ export default { ...@@ -118,7 +145,7 @@ export default {
const link = document.createElement('a') const link = document.createElement('a')
link.style.display = 'none' link.style.display = 'none'
link.href = URL.createObjectURL(blob) link.href = URL.createObjectURL(blob)
link.download = excelName // 下载的文件名 link.download = excelName + '.xlsx' // 下载的文件名
document.body.appendChild(link) document.body.appendChild(link)
link.click() link.click()
document.body.removeChild(link) document.body.removeChild(link)
...@@ -150,4 +177,9 @@ export default { ...@@ -150,4 +177,9 @@ export default {
.table-class{ .table-class{
height: 100%; height: 100%;
} }
.canvas-class{
width: 100%;
height: 100%;
background-size: 100% 100% !important;
}
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论