<template>
|
<el-dialog
|
ref="enlargeDialog"
|
:title="viewInfo?.title"
|
:append-to-body="true"
|
v-model="dialogShow"
|
width="70vw"
|
trigger="click"
|
class="userViewEnlarge-class"
|
:style="dialogStyle"
|
@close="handleClose"
|
>
|
<template #header v-if="!isIframe">
|
<div class="header-title">
|
<div>{{ viewInfo?.title }}</div>
|
<div class="export-button">
|
<el-select
|
v-if="optType === 'enlarge' && exportPermissions[0]"
|
v-model="pixel"
|
class="pixel-select"
|
size="small"
|
>
|
<el-option-group v-for="group in pixelOptions" :key="group.label" :label="group.label">
|
<el-option
|
v-for="item in group.options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-option-group>
|
</el-select>
|
<el-button
|
class="m-button"
|
v-if="optType === 'enlarge' && exportPermissions[0]"
|
link
|
@click="downloadViewImage"
|
>
|
<el-icon size="16" style="margin-right: 3px"><icon_download_outlined /></el-icon>
|
{{ t('chart.export_img') }}
|
</el-button>
|
<el-button
|
class="m-button"
|
v-if="optType === 'details' && exportPermissions[1]"
|
link
|
:loading="exportLoading"
|
:disabled="
|
requestStore.loadingMap[permissionStore.currentPath] > 0 ||
|
state.dataFrom === 'template'
|
"
|
@click="downloadViewDetails('view')"
|
>
|
<el-icon size="16" style="margin-right: 3px"><icon_download_outlined /></el-icon>
|
{{ t('chart.export_excel') }}
|
</el-button>
|
<el-button
|
class="m-button"
|
v-if="optType === 'details' && exportPermissions[2]"
|
link
|
:loading="exportLoading"
|
@click="downloadViewDetails('dataset')"
|
:disabled="
|
requestStore.loadingMap[permissionStore.currentPath] > 0 ||
|
state.dataFrom === 'template'
|
"
|
>
|
<el-icon size="16" style="margin-right: 3px"><icon_download_outlined /></el-icon>
|
{{ t('chart.export_raw_details') }}
|
</el-button>
|
<el-button
|
class="m-button"
|
v-if="optType === 'details' && exportPermissions[2] && viewInfo.type === 'table-pivot'"
|
link
|
:loading="exportLoading"
|
@click="exportAsFormattedExcel"
|
>
|
<el-icon color="#1F2329" size="16" style="margin-right: 3px"
|
><icon_download_outlined
|
/></el-icon>
|
{{ t('chart.export_excel_formatter') }}
|
</el-button>
|
<el-divider
|
class="close-divider"
|
direction="vertical"
|
v-if="exportPermissions[0] || exportPermissions[1] || exportPermissions[2]"
|
/>
|
</div>
|
</div>
|
</template>
|
<div
|
v-loading="downLoading"
|
:element-loading-text="t('visualization.export_loading')"
|
element-loading-background="rgba(122, 122, 122, 1)"
|
class="enlarge-outer"
|
v-if="dialogShow"
|
>
|
<div
|
id="enlarge-inner-content"
|
class="enlarge-inner"
|
:class="{
|
'enlarge-inner-with-header': optType === 'details' && sourceViewType.includes('chart-mix')
|
}"
|
v-loading="requestStore.loadingMap[permissionStore.currentPath]"
|
ref="viewContainer"
|
:style="customExport"
|
>
|
<component-wrapper
|
v-if="optType === 'enlarge'"
|
class="enlarge-wrapper"
|
:opt-type="optType"
|
:view-info="viewInfo"
|
:config="config"
|
:dv-info="dvInfo"
|
:font-family="canvasStyleData?.fontFamily"
|
show-position="viewDialog"
|
/>
|
<template v-if="optType === 'details' && !sourceViewType.includes('chart-mix')">
|
<chart-component-s2
|
v-if="!detailsError"
|
:view="viewInfo"
|
show-position="viewDialog"
|
ref="chartComponentDetails"
|
/>
|
<empty-background
|
v-if="detailsError"
|
:description="t('visualization.no_details')"
|
img-type="noneWhite"
|
/>
|
</template>
|
<template v-else-if="optType === 'details' && sourceViewType.includes('chart-mix')">
|
<el-tabs class="tab-header" v-model="activeName" @tab-change="handleClick">
|
<el-tab-pane :label="t('chart.drag_block_value_axis_left')" name="left"></el-tab-pane>
|
<el-tab-pane :label="t('chart.drag_block_value_axis_right')" name="right"></el-tab-pane>
|
</el-tabs>
|
<div style="flex: 1">
|
<chart-component-s2
|
v-if="activeName === 'left'"
|
:view="viewInfo"
|
show-position="viewDialog"
|
ref="chartComponentDetails"
|
/>
|
<chart-component-s2
|
v-else-if="activeName === 'right'"
|
:view="viewInfo"
|
show-position="viewDialog"
|
ref="chartComponentDetails2"
|
/>
|
</div>
|
</template>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
|
import { computed, h, nextTick, reactive, ref } from 'vue'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { deepCopy } from '@/utils/utils'
|
import icon_download_outlined from '@/assets/svg/icon_download_outlined.svg'
|
import ChartComponentS2 from '@/views/chart/components/views/components/ChartComponentS2.vue'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { exportExcelDownload } from '@/views/chart/components/js/util'
|
import { storeToRefs } from 'pinia'
|
import { RefreshLeft } from '@element-plus/icons-vue'
|
import { assign, merge } from 'lodash-es'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { ElMessage, ElButton } from 'element-plus-secondary'
|
import { exportPivotExcel } from '@/views/chart/components/js/panel/common/common_table'
|
import { useRequestStoreWithOut } from '@/store/modules/request'
|
import { usePermissionStoreWithOut } from '@/store/modules/permission'
|
import { activeWatermarkCheckUser } from '@/components/watermark/watermark'
|
import { getCanvasStyle } from '@/utils/style'
|
import { exportPermission } from '@/utils/utils'
|
import EmptyBackground from '../empty-background/src/EmptyBackground.vue'
|
import { supportExtremumChartType } from '@/views/chart/components/js/extremumUitl'
|
import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
|
import html2canvas from 'html2canvas'
|
const downLoading = ref(false)
|
const dvMainStore = dvMainStoreWithOut()
|
const dialogShow = ref(false)
|
const requestStore = useRequestStoreWithOut()
|
const permissionStore = usePermissionStoreWithOut()
|
let viewInfo = ref<DeepPartial<ChartObj>>(null)
|
const config = ref(null)
|
const viewContainer = ref(null)
|
const { t } = useI18n()
|
const optType = ref(null)
|
const chartComponentDetails = ref(null)
|
const chartComponentDetails2 = ref(null)
|
const { dvInfo, isIframe, canvasStyleData } = storeToRefs(dvMainStore)
|
const exportLoading = ref(false)
|
const sourceViewType = ref()
|
const activeName = ref('left')
|
const detailsError = ref(false)
|
const DETAIL_CHART_ATTR: DeepPartial<ChartObj> = {
|
render: 'antv',
|
type: 'table-info',
|
customAttr: {
|
basicStyle: {
|
tableColumnMode: 'dialog',
|
tablePageMode: 'pull'
|
},
|
tableHeader: {
|
tableHeaderBgColor: 'rgba(255,255,255,0.3)',
|
tableHeaderFontColor: '#7C7E81'
|
},
|
tableCell: {
|
tableItemBgColor: 'rgba(255,255,255,0)',
|
tableFontColor: '#7C7E81',
|
enableTableCrossBG: false,
|
mergeCells: false
|
},
|
tooltip: {
|
show: false
|
}
|
},
|
senior: {
|
scrollCfg: {
|
open: false
|
}
|
},
|
showPosition: 'dialog'
|
}
|
|
const state = reactive({
|
scale: 0.5,
|
componentSourceType: null,
|
dataFrom: null
|
})
|
const DETAIL_TABLE_ATTR: DeepPartial<ChartObj> = {
|
senior: {
|
scrollCfg: {
|
open: false
|
}
|
},
|
showPosition: 'dialog'
|
}
|
|
const dialogStyle = computed(() => {
|
return [
|
{ '--ed-dialog-bg-color': canvasStyleData.value.dialogBackgroundColor },
|
{ '--ed-dialog__de-text': canvasStyleData.value.dialogButton }
|
]
|
})
|
|
const exportPermissions = computed(() =>
|
exportPermission(dvInfo.value['weight'], dvInfo.value['ext'])
|
)
|
|
const customExport = computed(() => {
|
const style =
|
canvasStyleData.value && optType.value === 'enlarge'
|
? getCanvasStyle(canvasStyleData.value, 'canvas-main')
|
: {}
|
if (downLoading.value) {
|
const bashStyle = pixel.value.split(' * ')
|
style['width'] = bashStyle[0] + 'px!important'
|
style['height'] = bashStyle[1] + 'px!important'
|
return style
|
} else {
|
return style
|
}
|
})
|
|
const pixel = ref('1280 * 720')
|
|
const pixelOptions = [
|
{
|
label: 'Windows(16:9)',
|
options: [
|
{
|
value: '1920 * 1080',
|
label: '1920 * 1080'
|
},
|
{
|
value: '1600 * 900',
|
label: '1600 * 900'
|
},
|
{
|
value: '1280 * 720',
|
label: '1280 * 720'
|
}
|
]
|
},
|
{
|
label: 'MacOS(16:10)',
|
options: [
|
{
|
value: '2560 * 1600',
|
label: '2560 * 1600'
|
},
|
{
|
value: '1920 * 1200',
|
label: '1920 * 1200'
|
},
|
{
|
value: '1680 * 1050',
|
label: '1680 * 1050'
|
}
|
]
|
}
|
]
|
const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
|
state.scale = params.scale
|
sourceViewType.value = view.type
|
detailsError.value = false
|
optType.value = opt
|
dialogShow.value = true
|
state.componentSourceType = view.type
|
state.dataFrom = view.dataFrom
|
viewInfo.value = deepCopy(view) as DeepPartial<ChartObj>
|
viewInfo.value.customStyle.text.show = false
|
config.value = deepCopy(item)
|
if (opt === 'details') {
|
if (!viewInfo.value.type?.includes('table')) {
|
assign(viewInfo.value, DETAIL_CHART_ATTR)
|
viewInfo.value.xAxis.forEach(i => (i.hide = false))
|
viewInfo.value.yAxis.forEach(i => (i.hide = false))
|
viewInfo.value['customAttr']['tableHeader']['tableHeaderFontColor'] =
|
canvasStyleData.value.dialogButton
|
viewInfo.value['customAttr']['tableCell']['tableFontColor'] =
|
canvasStyleData.value.dialogButton
|
} else {
|
assign(viewInfo.value, DETAIL_TABLE_ATTR)
|
}
|
dataDetailsOpt()
|
}
|
nextTick(() => {
|
initWatermark()
|
ChartCarouselTooltip.paused()
|
useEmitt().emitter.emit('showEnlargeDialog', true)
|
})
|
}
|
|
const dataDetailsOpt = () => {
|
nextTick(() => {
|
const viewDataInfo = dvMainStore.getViewDataDetails(viewInfo.value.id)
|
if (viewDataInfo) {
|
if (sourceViewType.value.includes('chart-mix')) {
|
chartComponentDetails.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.left)
|
chartComponentDetails2.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.right)
|
} else {
|
chartComponentDetails.value.renderChartFromDialog(viewInfo.value, viewDataInfo)
|
}
|
} else {
|
detailsError.value = true
|
}
|
})
|
}
|
|
const handleClick = tab => {
|
nextTick(() => {
|
const viewDataInfo = dvMainStore.getViewDataDetails(viewInfo.value.id)
|
if (tab === 'left') {
|
chartComponentDetails.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.left)
|
} else if (tab === 'right') {
|
chartComponentDetails2.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.right)
|
}
|
})
|
}
|
|
const downloadViewImage = () => {
|
htmlToImage()
|
}
|
|
const downloadViewDetails = (downloadType = 'view') => {
|
const viewDataInfo = dvMainStore.getViewDataDetails(viewInfo.value.id)
|
const viewInfoSource = deepCopy(dvMainStore.getViewDetails(viewInfo.value.id))
|
if (!viewDataInfo) {
|
ElMessage.error(t('chart.field_is_empty_export_error'))
|
return
|
}
|
const chartExtRequest = dvMainStore.getLastViewRequestInfo(viewInfo.value.id)
|
const chart = {
|
...viewInfoSource,
|
chartExtRequest,
|
data: viewDataInfo,
|
type: sourceViewType.value,
|
downloadType: downloadType,
|
busiFlag: dvInfo.value.type
|
}
|
exportLoading.value = true
|
exportExcelDownload(chart, dvInfo.value.name, () => {
|
openMessageLoading(exportData)
|
})
|
exportLoading.value = false
|
}
|
|
const exportAsFormattedExcel = () => {
|
const s2Instance = dvMainStore.getViewInstanceInfo(viewInfo.value.id)
|
if (!s2Instance) {
|
return
|
}
|
const chart = dvMainStore.getViewDetails(viewInfo.value.id)
|
exportPivotExcel(s2Instance, chart)
|
}
|
const exportData = () => {
|
useEmitt().emitter.emit('data-export-center', { activeName: 'IN_PROGRESS' })
|
}
|
|
const openMessageLoading = cb => {
|
const iconClass = `el-icon-loading`
|
const customClass = `de-message-loading de-message-export`
|
ElMessage({
|
message: h('p', null, [
|
t('data_fill.exporting'),
|
h(
|
ElButton,
|
{
|
text: true,
|
size: 'small',
|
class: 'btn-text',
|
onClick: () => {
|
cb()
|
}
|
},
|
t('data_export.export_center')
|
),
|
t('data_fill.progress_to_download')
|
]),
|
iconClass,
|
icon: h(RefreshLeft),
|
showClose: true,
|
customClass
|
})
|
}
|
// 地图
|
const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
|
const htmlToImage = () => {
|
downLoading.value = mapChartTypes.includes(viewInfo.value.type) ? false : true
|
useEmitt().emitter.emit('renderChart-viewDialog-' + viewInfo.value.id)
|
useEmitt().emitter.emit('l7-prepare-picture', viewInfo.value.id)
|
// 表格和支持最值图表的渲染时间为2000毫秒，其他图表为500毫秒。
|
const renderTime =
|
viewInfo.value.type?.includes('table') ||
|
supportExtremumChartType({ type: viewInfo.value.type })
|
? 2000
|
: 500
|
setTimeout(() => {
|
initWatermark()
|
html2canvas(viewContainer.value)
|
.then(canvas => {
|
const dom = document.body.appendChild(canvas)
|
dom.style.display = 'none'
|
document.body.removeChild(dom)
|
const dataUrl = dom.toDataURL('image/png', 1)
|
downLoading.value = false
|
const a = document.createElement('a')
|
a.setAttribute('download', viewInfo.value.title)
|
a.href = dataUrl
|
a.click()
|
useEmitt().emitter.emit('l7-unprepare-picture', viewInfo.value.id)
|
useEmitt().emitter.emit('renderChart-viewDialog-' + viewInfo.value.id)
|
initWatermark()
|
})
|
.catch(error => {
|
downLoading.value = false
|
initWatermark()
|
useEmitt().emitter.emit('l7-unprepare-picture', viewInfo.value.id)
|
useEmitt().emitter.emit('renderChart-viewDialog-' + viewInfo.value.id)
|
console.error('oops, something went wrong!', error)
|
})
|
}, renderTime)
|
}
|
|
const initWatermark = () => {
|
activeWatermarkCheckUser('enlarge-inner-content', 'canvas-main', state.scale)
|
}
|
const handleClose = () => {
|
useEmitt().emitter.emit('showEnlargeDialog', false)
|
ChartCarouselTooltip.closeEnlargeDialogDestroy(viewInfo.value.id)
|
}
|
defineExpose({
|
dialogInit
|
})
|
</script>
|
|
<style lang="less">
|
.userViewEnlarge-class {
|
.ed-dialog__close {
|
color: var(--ed-dialog__de-text) !important;
|
}
|
.ed-dialog__header {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
margin-right: unset;
|
}
|
.ed-dialog__headerbtn {
|
position: unset;
|
}
|
.header-title {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
color: var(--ed-dialog__de-text);
|
|
font-size: 16px;
|
font-weight: 500;
|
line-height: 24px;
|
}
|
}
|
</style>
|
<style lang="less" scoped>
|
.export-button {
|
.pixel-select {
|
width: 125px;
|
margin-right: 8px;
|
:deep(.ed-select__wrapper) {
|
background-color: rgba(255, 255, 255, 0) !important;
|
}
|
:deep(.ed-select__placeholder) {
|
color: var(--ed-dialog__de-text);
|
}
|
}
|
|
.m-button {
|
color: var(--ed-dialog__de-text);
|
font-size: 14px;
|
font-style: normal;
|
font-weight: 400;
|
}
|
|
.ed-button.is-link {
|
font-size: 14px;
|
font-weight: 400;
|
padding: 4px;
|
|
&:not(.is-disabled):focus,
|
&:not(.is-disabled):hover {
|
color: var(--ed-dialog__de-text) !important;
|
opacity: 0.5;
|
border-color: transparent;
|
background-color: rgba(31, 35, 41, 0.1);
|
}
|
&:not(.is-disabled):active {
|
color: #1f2329;
|
border-color: transparent;
|
background-color: rgba(31, 35, 41, 0.2);
|
}
|
}
|
}
|
.close-divider {
|
margin: 0 16px 0 12px;
|
}
|
.enlarge-outer {
|
position: relative;
|
height: 65vh;
|
overflow: hidden;
|
.enlarge-inner {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background-size: 100% 100% !important;
|
}
|
.enlarge-inner-with-header {
|
display: flex;
|
flex-direction: column;
|
}
|
.enlarge-wrapper {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.tab-header {
|
margin-top: -10px;
|
margin-bottom: 10px;
|
--ed-tabs-header-height: 34px;
|
--custom-tab-color: #646a73;
|
|
:deep(.ed-tabs__nav-wrap::after) {
|
background-color: unset;
|
}
|
|
&.dark {
|
--custom-tab-color: #a6a6a6;
|
}
|
|
:deep(.ed-tabs__item) {
|
font-weight: 400;
|
font-size: 12px;
|
padding: 0 8px !important;
|
margin-right: 12px;
|
color: var(--custom-tab-color);
|
}
|
:deep(.is-active) {
|
font-weight: 500;
|
color: var(--ed-color-primary, #3370ff);
|
}
|
|
:deep(.ed-tabs__nav-scroll) {
|
padding-left: 0 !important;
|
}
|
|
:deep(.ed-tabs__header) {
|
margin: 0 !important;
|
}
|
|
:deep(.ed-tabs__content) {
|
height: calc(100% - 35px);
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
}
|
</style>
|
