修改data-visualization\components\data-visualization
This commit is contained in:
parent
2564a859f6
commit
f56576b2c6
@ -59,7 +59,6 @@ const contextmenuStore = contextmenuStoreWithOut()
|
||||
const { curComponent, dvInfo, editMode, tabMoveOutComponentId, canvasState, mainScrollTop } =
|
||||
storeToRefs(dvMainStore)
|
||||
const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
|
||||
const emits = defineEmits(['scrollCanvasAdjust'])
|
||||
const props = defineProps({
|
||||
themes: {
|
||||
type: String,
|
||||
@ -265,7 +264,7 @@ watch(
|
||||
|
||||
watch(
|
||||
() => areaData.value.components.length,
|
||||
(val, oldVal) => {
|
||||
() => {
|
||||
groupAreaClickChange()
|
||||
}
|
||||
)
|
||||
@ -938,7 +937,7 @@ function removeItem(index) {
|
||||
dvMainStore.removeLinkageInfo(item['id'])
|
||||
if (isMainCanvas(canvasId.value)) {
|
||||
// 主画布中存在隐藏组件 直接从原始componentData中进行删除
|
||||
dvMainStore.deleteComponentById(item.id)
|
||||
dvMainStore.deleteComponentById(item.id, undefined, false)
|
||||
} else {
|
||||
componentData.value.splice(index, 1)
|
||||
}
|
||||
|
||||
@ -1,19 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { getStyle } from '@/data-visualization/utils/style'
|
||||
import eventBus from '@/data-visualization/utils/eventBus'
|
||||
import { ref, onMounted, toRefs, getCurrentInstance, computed, nextTick } from 'vue'
|
||||
import { ref, toRefs, computed, nextTick } from 'vue'
|
||||
import findComponent from '@/data-visualization/utils/components'
|
||||
import { downloadCanvas2, imgUrlTrans } from '@/data-visualization/utils/imgUtils'
|
||||
|
||||
import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
|
||||
import Board from '@/data-visualization/components/de-board/Board.vue'
|
||||
import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
|
||||
import { activeWatermarkCheckUser, removeActiveWatermark } from '@/data-visualization/components/watermark/watermark'
|
||||
import { isMobile } from '@/data-visualization/utils/utils'
|
||||
import { isDashboard } from '@/data-visualization/utils/canvasUtils'
|
||||
import { isDashboard, isMainCanvas } from '@/data-visualization/utils/canvasUtils'
|
||||
import { XpackComponent } from '@/data-visualization/components/plugin'
|
||||
import DePreviewPopDialog from '@/data-visualization/components/visualization/DePreviewPopDialog.vue'
|
||||
import Icon from '../../icon-custom/src/Icon.vue'
|
||||
import replaceOutlined from '@/assets/svg/icon_replace_outlined.svg'
|
||||
|
||||
const componentWrapperInnerRef = ref(null)
|
||||
const componentEditBarRef = ref(null)
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const downLoading = ref(false)
|
||||
const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
|
||||
const dePreviewPopDialogRef = ref(null)
|
||||
const commonFilterAttrsFilterBorder = [
|
||||
'width',
|
||||
'height',
|
||||
@ -113,6 +121,11 @@ const props = defineProps({
|
||||
optType: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
// 画布滚动距离
|
||||
scrollMain: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
const {
|
||||
@ -124,23 +137,25 @@ const {
|
||||
dvInfo,
|
||||
searchCount,
|
||||
scale,
|
||||
suffixId
|
||||
suffixId,
|
||||
scrollMain
|
||||
} = toRefs(props)
|
||||
let currentInstance
|
||||
const component = ref(null)
|
||||
const emits = defineEmits(['userViewEnlargeOpen', 'datasetParamsInit', 'onPointClick'])
|
||||
const wrapperId = 'wrapper-outer-id-' + config.value.id
|
||||
|
||||
const viewDemoInnerId = computed(() => 'enlarge-inner-content-' + config.value.id)
|
||||
const htmlToImage = () => {
|
||||
useEmitt().emitter.emit('l7-prepare-picture', config.value.id)
|
||||
downLoading.value = true
|
||||
setTimeout(() => {
|
||||
const vueDom = componentWrapperInnerRef.value
|
||||
const vueDom = document.getElementById(viewDemoInnerId.value)
|
||||
activeWatermarkCheckUser(viewDemoInnerId.value, 'canvas-main', scale.value / 100)
|
||||
downloadCanvas2('img', vueDom, '图表', () => {
|
||||
// do callback
|
||||
removeActiveWatermark(viewDemoInnerId.value)
|
||||
downLoading.value = false
|
||||
useEmitt().emitter.emit('l7-unprepare-picture', config.value.id)
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
@ -149,20 +164,22 @@ const handleInnerMouseDown = e => {
|
||||
// do setCurComponent
|
||||
if (showPosition.value.includes('multiplexing')) {
|
||||
componentEditBarRef.value.multiplexingCheckOut()
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
e?.stopPropagation()
|
||||
e?.preventDefault()
|
||||
}
|
||||
if (showPosition.value.includes('popEdit') || dvMainStore.mobileInPc) {
|
||||
if (
|
||||
(!['rich-text'].includes(config.value.innerType) &&
|
||||
['popEdit', 'preview'].includes(showPosition.value)) ||
|
||||
dvMainStore.mobileInPc
|
||||
) {
|
||||
onClick(e)
|
||||
if (e.target?.className?.includes('ed-input__inner')) return
|
||||
e?.stopPropagation()
|
||||
e?.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
currentInstance = getCurrentInstance()
|
||||
const methodName = 'componentImageDownload-' + config.value.id
|
||||
})
|
||||
|
||||
const onClick = e => {
|
||||
const onClick = () => {
|
||||
// 将当前点击组件的事件传播出去
|
||||
eventBus.emit('componentClick')
|
||||
dvMainStore.setInEditorStatus(true)
|
||||
@ -287,11 +304,20 @@ const eventEnable = computed(
|
||||
['indicator', 'rich-text'].includes(config.value.innerType)) &&
|
||||
config.value.events &&
|
||||
config.value.events.checked &&
|
||||
(isDashboard() || (!isDashboard() && !isMobile()))
|
||||
(isDashboard() || (!isDashboard() && !isMobile())) &&
|
||||
showPosition.value !== 'canvas-multiplexing'
|
||||
)
|
||||
|
||||
const onWrapperClickCur = e => {
|
||||
// 指标卡为内部触发
|
||||
if (['indicator'].includes(config.value.innerType)) {
|
||||
return
|
||||
}
|
||||
onWrapperClick(e)
|
||||
}
|
||||
|
||||
const onWrapperClick = e => {
|
||||
if (eventEnable.value && showPosition.value !== 'canvas-multiplexing') {
|
||||
if (eventEnable.value) {
|
||||
if (config.value.events.type === 'showHidden') {
|
||||
// 打开弹框区域
|
||||
nextTick(() => {
|
||||
@ -302,15 +328,9 @@ const onWrapperClick = e => {
|
||||
const jumpType = config.value.events.jump.type
|
||||
try {
|
||||
if ('newPop' === jumpType) {
|
||||
window.open(
|
||||
url,
|
||||
'_blank',
|
||||
'width=800,height=600,left=200,top=100,toolbar=no,scrollbars=yes,resizable=yes,location=no'
|
||||
)
|
||||
dePreviewPopDialogRef.value.previewInit({ url, size: 'middle' })
|
||||
} else if ('_blank' === jumpType) {
|
||||
console.info('DataEase Component Jump _blank value:' + window['originOpen'])
|
||||
if (window['originOpen']) {
|
||||
console.info('DataEase Component originOpen _blank')
|
||||
window['originOpen'](url, '_blank')
|
||||
} else {
|
||||
window.open(url, '_blank')
|
||||
@ -321,9 +341,15 @@ const onWrapperClick = e => {
|
||||
} catch (e) {
|
||||
console.warn('url 格式错误:' + url)
|
||||
}
|
||||
} else if (config.value.events.type === 'refreshDataV') {
|
||||
useEmitt().emitter.emit('componentRefresh')
|
||||
} else if (config.value.events.type === 'fullScreen') {
|
||||
useEmitt().emitter.emit('canvasFullscreen')
|
||||
} else if (config.value.events.type === 'download') {
|
||||
useEmitt().emitter.emit('canvasDownload')
|
||||
}
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
e?.preventDefault()
|
||||
e?.stopPropagation()
|
||||
}
|
||||
}
|
||||
|
||||
@ -339,12 +365,47 @@ const initOpenHandler = newWindow => {
|
||||
}
|
||||
const deepScale = computed(() => scale.value / 100)
|
||||
const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc && props.active))
|
||||
|
||||
const freezeFlag = computed(() => {
|
||||
return (
|
||||
isMainCanvas(props.canvasId) &&
|
||||
config.value.freeze &&
|
||||
scrollMain.value - config.value.style?.top > 0
|
||||
)
|
||||
})
|
||||
|
||||
const commonParams = computed(() => {
|
||||
return {
|
||||
eventEnable: eventEnable.value,
|
||||
eventType: config.value.events.type
|
||||
}
|
||||
})
|
||||
|
||||
const showCheck = computed(() => {
|
||||
return dvMainStore.mobileInPc && showPosition.value === 'edit'
|
||||
})
|
||||
|
||||
const updateFromMobile = (e, type) => {
|
||||
if (type === 'syncPcDesign') {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
useEmitt().emitter.emit('onMobileStatusChange', {
|
||||
type: type,
|
||||
value: config.value.id
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="wrapper-outer"
|
||||
:class="showPosition + '-' + config.component"
|
||||
:class="[
|
||||
showPosition + '-' + config.component,
|
||||
{
|
||||
'freeze-component': freezeFlag
|
||||
}
|
||||
]"
|
||||
:id="wrapperId"
|
||||
@mousedown="handleInnerMouseDown"
|
||||
@mouseenter="onMouseEnter"
|
||||
@ -352,6 +413,16 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
|
||||
element-loading-text="导出中..."
|
||||
element-loading-background="rgba(255, 255, 255, 1)"
|
||||
>
|
||||
<div
|
||||
:title="$t('visualization.sync_pc_design')"
|
||||
v-if="showCheck"
|
||||
class="refresh-from-pc"
|
||||
@click="updateFromMobile($event, 'syncPcDesign')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_replace_outlined"><replaceOutlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
<component-edit-bar
|
||||
v-if="!showPosition.includes('canvas') && !props.isSelector"
|
||||
class="wrapper-edit-bar"
|
||||
@ -361,6 +432,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
|
||||
:element="config"
|
||||
:show-position="showPosition"
|
||||
:class="{ 'wrapper-edit-bar-active': active }"
|
||||
@componentImageDownload="htmlToImage"
|
||||
@userViewEnlargeOpen="opt => emits('userViewEnlargeOpen', opt)"
|
||||
@datasetParamsInit="() => emits('datasetParamsInit')"
|
||||
></component-edit-bar>
|
||||
@ -382,7 +454,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
|
||||
class="wrapper-inner-adaptor"
|
||||
:style="slotStyle"
|
||||
:class="{ 'pop-wrapper-inner': showActive, 'event-active': eventEnable }"
|
||||
@mousedown="onWrapperClick"
|
||||
@mousedown="onWrapperClickCur"
|
||||
>
|
||||
<component
|
||||
:is="findComponent(config['component'])"
|
||||
@ -406,7 +478,10 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
|
||||
:is-edit="false"
|
||||
:suffix-id="suffixId"
|
||||
:font-family="fontFamily"
|
||||
:active="active"
|
||||
:common-params="commonParams"
|
||||
@onPointClick="onPointClick"
|
||||
@onComponentEvent="onWrapperClick"
|
||||
/>
|
||||
</div>
|
||||
<!--边框背景-->
|
||||
@ -426,12 +501,22 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
|
||||
}
|
||||
.wrapper-outer {
|
||||
position: absolute;
|
||||
.refresh-from-pc {
|
||||
position: absolute;
|
||||
right: 38px;
|
||||
top: 12px;
|
||||
z-index: 2;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
.wrapper-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-size: 100% 100% !important;
|
||||
padding: 0 !important;
|
||||
.wrapper-inner-adaptor {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
@ -475,4 +560,11 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
|
||||
.event-active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.freeze-component {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: var(--top-show-offset) px !important;
|
||||
left: var(--left-show-offset) px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -298,64 +298,73 @@ const editQueryCriteria = () => {
|
||||
<el-divider class="custom-divider" />
|
||||
<li @click="deleteComponent">{{ t('visualization.delete') }}</li>
|
||||
</template>
|
||||
<li
|
||||
v-show="!(!curComponent || curComponent['isLock'] || curComponent['component'] != 'Group')"
|
||||
@click="decompose()"
|
||||
>
|
||||
{{ t('visualization.cancel_group') }}
|
||||
</li>
|
||||
<el-divider class="custom-divider" v-show="composeDivider" />
|
||||
<template v-if="curComponent">
|
||||
<template v-if="!curComponent['isLock'] && curComponent.category === 'hidden'">
|
||||
<li @click="categoryChange('base')">{{ t('visualization.move_to_screen_show') }}</li>
|
||||
<li @click="editQueryCriteria">{{ t('visualization.edit') }}</li>
|
||||
<li v-if="activePosition === 'aside'" @click="rename">{{ t('visualization.rename') }}</li>
|
||||
<li @click="copy">{{ t('visualization.copy') }}</li>
|
||||
<li @click="paste">{{ t('visualization.paste') }}</li>
|
||||
<el-divider class="custom-divider" />
|
||||
<li @click="deleteComponent">{{ t('visualization.delete') }}</li>
|
||||
<template v-else>
|
||||
<li
|
||||
v-show="
|
||||
!(!curComponent || curComponent['isLock'] || curComponent['component'] != 'Group')
|
||||
"
|
||||
@click="decompose()"
|
||||
>
|
||||
{{ t('visualization.cancel_group') }}
|
||||
</li>
|
||||
<el-divider class="custom-divider" v-show="composeDivider" />
|
||||
<template v-if="curComponent">
|
||||
<template v-if="!curComponent['isLock'] && curComponent.category === 'hidden'">
|
||||
<li @click="categoryChange('base')">{{ t('visualization.move_to_screen_show') }}</li>
|
||||
<li @click="editQueryCriteria">{{ t('visualization.edit') }}</li>
|
||||
<li v-if="activePosition === 'aside'" @click="rename">
|
||||
{{ t('visualization.rename') }}
|
||||
</li>
|
||||
<li @click="copy">{{ t('visualization.copy') }}</li>
|
||||
<li @click="paste">{{ t('visualization.paste') }}</li>
|
||||
<el-divider class="custom-divider" />
|
||||
<li @click="deleteComponent">{{ t('visualization.delete') }}</li>
|
||||
</template>
|
||||
<template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
|
||||
<li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">
|
||||
{{ t('visualization.edit') }}
|
||||
</li>
|
||||
<li @click="upComponent">{{ t('visualization.up_component') }}</li>
|
||||
<li @click="downComponent">{{ t('visualization.down_component') }}</li>
|
||||
<li @click="topComponent">{{ t('visualization.top_component') }}</li>
|
||||
<li @click="bottomComponent">{{ t('visualization.bottom_component') }}</li>
|
||||
<li @click="customSort" v-if="curComponent.component === 'DeTabs'">
|
||||
{{ t('visualization.sort') }}
|
||||
</li>
|
||||
<xpack-component
|
||||
:chart="curComponent"
|
||||
is-screen
|
||||
resource-table="snapshot"
|
||||
jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
|
||||
/>
|
||||
<li @click="categoryChange('hidden')" v-show="showMoveMenu">
|
||||
{{ t('visualization.move_to_pop_area') }}
|
||||
</li>
|
||||
<el-divider class="custom-divider" />
|
||||
<li @click="hide" v-show="curComponent['isShow']">{{ t('visualization.hidden') }}</li>
|
||||
<li @click="show" v-show="!curComponent['isShow'] || isGroupArea">
|
||||
{{ t('visualization.cancel_hidden') }}
|
||||
</li>
|
||||
<li @click="lock">{{ t('visualization.lock') }}</li>
|
||||
<li v-if="curComponent['isLock'] || isGroupArea" @click="unlock">
|
||||
{{ t('visualization.unlock') }}
|
||||
</li>
|
||||
<el-divider class="custom-divider" />
|
||||
<li v-if="activePosition === 'aside'" @click="rename">
|
||||
{{ t('visualization.rename') }}
|
||||
</li>
|
||||
<li @click="copy">{{ t('visualization.copy') }}</li>
|
||||
<li @click="paste">{{ t('visualization.paste') }}</li>
|
||||
<li @click="cut">{{ t('visualization.cut') }}</li>
|
||||
<el-divider class="custom-divider" />
|
||||
<li @click="deleteComponent">{{ t('visualization.delete') }}</li>
|
||||
</template>
|
||||
<li v-if="curComponent['isLock']" @click="unlock">{{ t('visualization.unlock') }}</li>
|
||||
</template>
|
||||
<template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
|
||||
<li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">
|
||||
{{ t('visualization.edit') }}
|
||||
</li>
|
||||
<li @click="upComponent">{{ t('visualization.up_component') }}</li>
|
||||
<li @click="downComponent">{{ t('visualization.down_component') }}</li>
|
||||
<li @click="topComponent">{{ t('visualization.top_component') }}</li>
|
||||
<li @click="bottomComponent">{{ t('visualization.bottom_component') }}</li>
|
||||
<li @click="customSort" v-if="curComponent.component === 'DeTabs'">
|
||||
{{ t('visualization.sort') }}
|
||||
</li>
|
||||
<xpack-component
|
||||
:chart="curComponent"
|
||||
is-screen
|
||||
jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
|
||||
/>
|
||||
<li @click="categoryChange('hidden')" v-show="showMoveMenu">
|
||||
{{ t('visualization.move_to_pop_area') }}
|
||||
</li>
|
||||
<el-divider class="custom-divider" />
|
||||
<li @click="hide" v-show="curComponent['isShow']">{{ t('visualization.hidden') }}</li>
|
||||
<li @click="show" v-show="!curComponent['isShow'] || isGroupArea">
|
||||
{{ t('visualization.cancel_hidden') }}
|
||||
</li>
|
||||
<li @click="lock">{{ t('visualization.lock') }}</li>
|
||||
<li v-if="curComponent['isLock'] || isGroupArea" @click="unlock">
|
||||
{{ t('visualization.unlock') }}
|
||||
</li>
|
||||
<el-divider class="custom-divider" />
|
||||
<li v-if="activePosition === 'aside'" @click="rename">{{ t('visualization.rename') }}</li>
|
||||
<li @click="copy">{{ t('visualization.copy') }}</li>
|
||||
<li @click="paste">{{ t('visualization.paste') }}</li>
|
||||
<li @click="cut">{{ t('visualization.cut') }}</li>
|
||||
<el-divider class="custom-divider" />
|
||||
<li @click="deleteComponent">{{ t('visualization.delete') }}</li>
|
||||
</template>
|
||||
<li v-if="curComponent['isLock']" @click="unlock">{{ t('visualization.unlock') }}</li>
|
||||
<li v-else-if="!curComponent && !areaData.components.length" @click="paste">
|
||||
{{ t('visualization.paste') }}
|
||||
</li>
|
||||
</template>
|
||||
<li v-else-if="!curComponent && !areaData.components.length" @click="paste">
|
||||
{{ t('visualization.paste') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { changeStyleWithScale } from '@/data-visualization/utils/translate'
|
||||
import { getCanvasStyle, getShapeItemStyle } from '@/data-visualization/utils/translate'
|
||||
import ComponentWrapper from './ComponentWrapper.vue'
|
||||
import { getCanvasStyle, getShapeItemStyle } from '@/data-visualization/utils/style'
|
||||
|
||||
import { changeStyleWithScale } from '@/data-visualization/utils/translate'
|
||||
import { computed, nextTick, ref, toRefs, watch, onBeforeUnmount, onMounted, reactive } from 'vue'
|
||||
import { changeRefComponentsSizeWithScalePoint } from '@/data-visualization/utils/changeComponentsSizeWithScale'
|
||||
|
||||
import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||
import UserViewEnlarge from '@/data-visualization/components/visualization/UserViewEnlarge.vue'
|
||||
import CanvasOptBar from '@/data-visualization/components/visualization/CanvasOptBar.vue'
|
||||
import { isDashboard, isMainCanvas, refreshOtherComponent } from '@/data-visualization/utils/canvasUtils'
|
||||
import { activeWatermarkCheckUser } from '@/data-visualization/components/watermark/watermark'
|
||||
|
||||
|
||||
import { XpackComponent } from '@/data-visualization/components/plugin'
|
||||
import PopArea from '@/data-visualization/custom-component/pop-area/Component.vue'
|
||||
|
||||
|
||||
// import CanvasFilterBtn from '@/data-visualization/custom-component/canvas-filter-btn/Component.vue'
|
||||
import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
|
||||
import DatasetParamsComponent from '@/data-visualization/components/visualization/DatasetParamsComponent.vue'
|
||||
// import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
|
||||
import DeFullscreen from '@/data-visualization/components/visualization/common/DeFullscreen.vue'
|
||||
import EmptyBackground from '../../empty-background/src/EmptyBackground.vue'
|
||||
// import LinkOptBar from '@/data-visualization/components/data-visualization/canvas/LinkOptBar.vue'
|
||||
import { isDesktop } from '@/data-visualization/utils/ModelUtil'
|
||||
import { isMobile } from '@/data-visualization/utils/utils'
|
||||
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { pcMatrixCount, curComponent, mobileInPc, canvasState, inMobile } = storeToRefs(dvMainStore)
|
||||
const openHandler = ref(null)
|
||||
@ -30,6 +30,7 @@ const emits = defineEmits(['onResetLayout'])
|
||||
const fullScreeRef = ref(null)
|
||||
const isOverSize = ref(false)
|
||||
const isDesktopFlag = isDesktop()
|
||||
const { t } = useI18n()
|
||||
const props = defineProps({
|
||||
canvasStyleData: {
|
||||
type: Object,
|
||||
@ -93,6 +94,11 @@ const props = defineProps({
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'inherit'
|
||||
},
|
||||
// 联动按钮位置
|
||||
showLinkageButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
@ -125,7 +131,8 @@ const dashboardActive = computed(() => {
|
||||
return dvInfo.value.type === 'dashboard'
|
||||
})
|
||||
const state = reactive({
|
||||
initState: true
|
||||
initState: true,
|
||||
scrollMain: 0
|
||||
})
|
||||
|
||||
const curSearchCount = computed(() => {
|
||||
@ -171,6 +178,7 @@ const canvasStyle = computed(() => {
|
||||
if (canvasStyleData.value?.screenAdaptor === 'keep') {
|
||||
style['height'] = canvasStyleData.value?.height + 'px'
|
||||
style['width'] = canvasStyleData.value?.width + 'px'
|
||||
style['margin'] = 'auto'
|
||||
} else {
|
||||
style['height'] = dashboardActive.value
|
||||
? downloadStatus.value
|
||||
@ -217,6 +225,30 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
useEmitt({
|
||||
name: 'tabCanvasChange-' + canvasId.value,
|
||||
callback: function () {
|
||||
restore()
|
||||
}
|
||||
})
|
||||
|
||||
useEmitt({
|
||||
name: 'componentRefresh',
|
||||
callback: function () {
|
||||
if (isMainCanvas(canvasId.value)) {
|
||||
refreshDataV()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
useEmitt({
|
||||
name: 'canvasFullscreen',
|
||||
callback: function () {
|
||||
if (isMainCanvas(canvasId.value)) {
|
||||
fullScreeRef.value.toggleFullscreen()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const resetLayout = () => {
|
||||
if (downloadStatus.value) {
|
||||
@ -446,6 +478,12 @@ const downloadAsPDF = () => {
|
||||
// test
|
||||
}
|
||||
|
||||
const scrollPreview = () => {
|
||||
state.scrollMain = previewCanvas.value.scrollTop
|
||||
}
|
||||
|
||||
const showUnpublishFlag = computed(() => dvInfo.value?.status === 0 && isMainCanvas(canvasId.value))
|
||||
|
||||
defineExpose({
|
||||
restore
|
||||
})
|
||||
@ -456,13 +494,18 @@ defineExpose({
|
||||
:id="domId"
|
||||
class="canvas-container"
|
||||
:style="canvasStyle"
|
||||
:class="{ 'de-download-custom': downloadStatus, 'datav-preview': dataVPreview }"
|
||||
:class="{
|
||||
'de-download-custom': downloadStatus,
|
||||
'datav-preview': dataVPreview,
|
||||
'datav-preview-unpublish': showUnpublishFlag
|
||||
}"
|
||||
ref="previewCanvas"
|
||||
@mousedown="handleMouseDown"
|
||||
@scroll="scrollPreview"
|
||||
v-if="state.initState"
|
||||
>
|
||||
<!--弹框触发区域-->
|
||||
<!-- <canvas-filter-btn :is-fixed="isOverSize" v-if="filterBtnShow"></canvas-filter-btn> -->
|
||||
<canvas-filter-btn :is-fixed="isOverSize" v-if="filterBtnShow"></canvas-filter-btn>
|
||||
<!-- 弹框区域 -->
|
||||
<PopArea
|
||||
v-if="popAreaAvailable"
|
||||
@ -475,8 +518,15 @@ defineExpose({
|
||||
:canvas-state="canvasState"
|
||||
:show-position="'preview'"
|
||||
></PopArea>
|
||||
<template v-if="renderReady">
|
||||
<ComponentWrapper
|
||||
<canvas-opt-bar
|
||||
v-if="showLinkageButton"
|
||||
:canvas-id="canvasId"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:component-data="baseComponentData"
|
||||
:is-fixed="isOverSize"
|
||||
></canvas-opt-bar>
|
||||
<template v-if="renderReady && !showUnpublishFlag">
|
||||
<component-wrapper
|
||||
v-for="(item, index) in baseComponentData"
|
||||
v-show="item.isShow"
|
||||
:active="item.id === (curComponent || {})['id']"
|
||||
@ -493,16 +543,32 @@ defineExpose({
|
||||
:scale="mobileInPc && isDashboard() ? 100 : scaleMin"
|
||||
:is-selector="props.isSelector"
|
||||
:font-family="canvasStyleData.fontFamily || fontFamily"
|
||||
:scroll-main="state.scrollMain"
|
||||
@userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
|
||||
@datasetParamsInit="datasetParamsInit(item)"
|
||||
@onPointClick="onPointClick"
|
||||
:index="index"
|
||||
/>
|
||||
</template>
|
||||
<empty-background
|
||||
v-if="showUnpublishFlag"
|
||||
:description="t('visualization.resource_not_published')"
|
||||
img-type="none"
|
||||
>
|
||||
</empty-background>
|
||||
<user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
|
||||
</div>
|
||||
<empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
|
||||
<!-- <de-fullscreen ref="fullScreeRef"></de-fullscreen> -->
|
||||
<de-fullscreen ref="fullScreeRef"></de-fullscreen>
|
||||
<dataset-params-component ref="customDatasetParamsRef"></dataset-params-component>
|
||||
<XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
|
||||
<link-opt-bar
|
||||
v-if="linkOptBarShow"
|
||||
ref="link-opt-bar"
|
||||
:terminal="'pc'"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
@link-export-pdf="downloadAsPDF"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -530,4 +596,8 @@ defineExpose({
|
||||
.datav-preview {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.datav-preview-unpublish {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div
|
||||
class="shape"
|
||||
:class="{ 'shape-group-area': isGroupArea }"
|
||||
:class="{
|
||||
'shape-group-area': isGroupArea,
|
||||
'freeze-component': freezeFlag,
|
||||
'freeze-component-fullscreen': freezeFlag && fullscreenFlag
|
||||
}"
|
||||
ref="shapeInnerRef"
|
||||
:id="domId"
|
||||
v-loading="downLoading"
|
||||
@ -55,6 +59,7 @@
|
||||
:element="element"
|
||||
:show-position="showPosition"
|
||||
:canvas-id="canvasId"
|
||||
@componentImageDownload="htmlToImage"
|
||||
@userViewEnlargeOpen="userViewEnlargeOpen"
|
||||
@datasetParamsInit="datasetParamsInit"
|
||||
@linkJumpSetOpen="linkJumpSetOpen"
|
||||
@ -177,7 +182,8 @@ const {
|
||||
tabMoveOutComponentId,
|
||||
mobileInPc,
|
||||
mainScrollTop,
|
||||
hiddenListStatus
|
||||
hiddenListStatus,
|
||||
fullscreenFlag
|
||||
} = storeToRefs(dvMainStore)
|
||||
const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
|
||||
const emit = defineEmits([
|
||||
@ -326,6 +332,14 @@ const initialAngle = {
|
||||
}
|
||||
const cursors = ref({})
|
||||
|
||||
const freezeFlag = computed(() => {
|
||||
return (
|
||||
isMainCanvas(canvasId.value) &&
|
||||
element.value.freeze &&
|
||||
mainScrollTop.value - defaultStyle.value.top > 0
|
||||
)
|
||||
})
|
||||
|
||||
const showCheck = computed(() => {
|
||||
return mobileInPc.value && element.value.canvasId === 'canvas-main'
|
||||
})
|
||||
@ -386,7 +400,7 @@ const getPointList = () => {
|
||||
}
|
||||
|
||||
const isActive = () => {
|
||||
return active.value && !element.value['isLock'] && isEditMode.value
|
||||
return active.value && !element.value['isLock'] && isEditMode.value && !freezeFlag.value
|
||||
}
|
||||
|
||||
const userViewEnlargeOpen = opt => {
|
||||
@ -538,7 +552,8 @@ const handleMouseDownOnShape = e => {
|
||||
// }
|
||||
|
||||
e.stopPropagation()
|
||||
if (element.value['isLock'] || !isEditMode.value) return
|
||||
// 锁定 非编辑状态 冻结状态 不进行移动
|
||||
if (element.value['isLock'] || !isEditMode.value || freezeFlag.value) return
|
||||
|
||||
cursors.value = getCursor() // 根据旋转角度获取光标位置
|
||||
|
||||
@ -897,30 +912,6 @@ const commonBackgroundSvgInner = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const padding3D = computed(() => {
|
||||
const width = defaultStyle.value.width // 原始元素宽度
|
||||
const height = defaultStyle.value.height // 原始元素高度
|
||||
const rotateX = element.value['multiDimensional'].x // 旋转X角度
|
||||
const rotateY = element.value['multiDimensional'].y // 旋转Y角度
|
||||
|
||||
// 将角度转换为弧度
|
||||
const radX = (rotateX * Math.PI) / 180
|
||||
const radY = (rotateY * Math.PI) / 180
|
||||
|
||||
// 计算旋转后新宽度和高度
|
||||
const newWidth = Math.abs(width * Math.cos(radY)) + Math.abs(height * Math.sin(radX))
|
||||
const newHeight = Math.abs(height * Math.cos(radX)) + Math.abs(width * Math.sin(radY))
|
||||
|
||||
// 计算需要的 padding
|
||||
const paddingX = (newWidth - width) / 2
|
||||
const paddingY = (newHeight - height) / 2
|
||||
|
||||
return {
|
||||
paddingX: `${paddingX}px`,
|
||||
paddingY: `${paddingY}px`
|
||||
}
|
||||
})
|
||||
|
||||
const componentBackgroundStyle = computed(() => {
|
||||
if (element.value.commonBackground && element.value.component !== 'GroupArea') {
|
||||
const {
|
||||
@ -1107,12 +1098,15 @@ const dragCollision = computed(() => {
|
||||
|
||||
const htmlToImage = () => {
|
||||
downLoading.value = true
|
||||
useEmitt().emitter.emit('l7-prepare-picture', element.value.id)
|
||||
setTimeout(() => {
|
||||
activeWatermarkCheckUser(viewDemoInnerId.value, 'canvas-main', scale.value)
|
||||
downloadCanvas2('img', componentInnerRef.value, '图表', () => {
|
||||
const dom = document.getElementById(viewDemoInnerId.value)
|
||||
downloadCanvas2('img', dom, '图表', () => {
|
||||
// do callback
|
||||
removeActiveWatermark(viewDemoInnerId.value)
|
||||
downLoading.value = false
|
||||
useEmitt().emitter.emit('l7-unprepare-picture', element.value.id)
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
@ -1138,13 +1132,11 @@ onMounted(() => {
|
||||
})
|
||||
settingAttribute()
|
||||
const methodName = 'componentImageDownload-' + element.value.id
|
||||
useEmitt().emitter.off(methodName)
|
||||
useEmitt({
|
||||
name: methodName,
|
||||
callback: () => {
|
||||
if (!useEmitt().emitter.all.get(methodName)?.length) {
|
||||
useEmitt().emitter.on(methodName, () => {
|
||||
htmlToImage()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1189,6 +1181,7 @@ onMounted(() => {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-size: 100% 100% !important;
|
||||
padding:0 !important;
|
||||
}
|
||||
|
||||
.shape-selected {
|
||||
@ -1318,4 +1311,14 @@ onMounted(() => {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.freeze-component {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 66px !important;
|
||||
}
|
||||
|
||||
.freeze-component-fullscreen {
|
||||
top: 5px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user