<script setup lang="ts">
|
import dvRuler from '@/assets/svg/dv-ruler.svg'
|
import CanvasAttr from '@/components/data-visualization/CanvasAttr.vue'
|
import { computed, watch, onMounted, reactive, ref, nextTick, onUnmounted } from 'vue'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
import { useAppStoreWithOut } from '@/store/modules/app'
|
import { storeToRefs } from 'pinia'
|
import DvToolbar from '../../components/data-visualization/DvToolbar.vue'
|
import ComponentToolBar from '../../components/data-visualization/ComponentToolBar.vue'
|
import eventBus from '../../utils/eventBus'
|
import { findComponentAttr } from '../../utils/components'
|
import DvSidebar from '../../components/visualization/DvSidebar.vue'
|
import router from '@/router'
|
import Editor from '@/views/chart/components/editor/index.vue'
|
import { guid } from '@/views/visualized/data/dataset/form/util.js'
|
import { getDatasetTree } from '@/api/dataset'
|
import { Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
|
import {
|
decompressionPre,
|
findDragComponent,
|
findNewComponent,
|
initCanvasData,
|
onInitReady
|
} from '@/utils/canvasUtils'
|
import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
|
import { listenGlobalKeyDown, releaseAttachKey } from '@/utils/DeShortcutKey'
|
import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
|
import { useEmbedded } from '@/store/modules/embedded'
|
import { changeComponentSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { check, compareStorage } from '@/utils/CrossPermission'
|
import { useCache } from '@/hooks/web/useCache'
|
import RealTimeListTree from '@/components/data-visualization/RealTimeListTree.vue'
|
import { interactiveStoreWithOut } from '@/store/modules/interactive'
|
import { watermarkFind } from '@/api/watermark'
|
import { XpackComponent } from '@/components/plugin'
|
import { Base64 } from 'js-base64'
|
import CanvasCacheDialog from '@/components/visualization/CanvasCacheDialog.vue'
|
import { deepCopy } from '@/utils/utils'
|
import DvPreview from '@/views/data-visualization/DvPreview.vue'
|
import DeRuler from '@/custom-component/common/DeRuler.vue'
|
import { useRequestStoreWithOut } from '@/store/modules/request'
|
import { usePermissionStoreWithOut } from '@/store/modules/permission'
|
import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
|
import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { recoverToPublished } from '@/api/visualization/dataVisualization'
|
const interactiveStore = interactiveStoreWithOut()
|
const embeddedStore = useEmbedded()
|
const { wsCache } = useCache()
|
const dvPreviewRef = ref(null)
|
const { t } = useI18n()
|
const eventCheck = e => {
|
if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
|
const opt = embeddedStore.opt || router.currentRoute.value.query.opt
|
if (!(opt && opt === 'create')) {
|
check(
|
wsCache.get('screen-weight'),
|
embeddedStore.dvId || (router.currentRoute.value.query.dvId as string),
|
4
|
)
|
}
|
}
|
}
|
const mainCanvasCoreRef = ref(null)
|
const customTabsSortRef = ref(null)
|
const appStore = useAppStoreWithOut()
|
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
|
const dvMainStore = dvMainStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
const contextmenuStore = contextmenuStoreWithOut()
|
const composeStore = composeStoreWithOut()
|
const canvasCacheOutRef = ref(null)
|
const deWRulerRef = ref(null)
|
const deHRulerRef = ref(null)
|
const requestStore = useRequestStoreWithOut()
|
const permissionStore = usePermissionStoreWithOut()
|
const {
|
fullscreenFlag,
|
componentData,
|
curComponent,
|
isClickComponent,
|
canvasStyleData,
|
canvasViewInfo,
|
editMode,
|
dvInfo,
|
canvasState,
|
batchOptStatus
|
} = storeToRefs(dvMainStore)
|
const { editorMap, isSpaceDown } = storeToRefs(composeStore)
|
const canvasOut = ref(null)
|
const canvasInner = ref(null)
|
const leftSidebarRef = ref(null)
|
const dvLayout = ref(null)
|
const canvasCenterRef = ref(null)
|
const mainHeight = ref(300)
|
let createType = null
|
let isDragging = false // 标记是否在拖动
|
let startX, startY, scrollLeft, scrollTop
|
const state = reactive({
|
sideShow: true,
|
countTime: 0,
|
datasetTree: [],
|
scaleHistory: null,
|
canvasId: 'canvas-main',
|
canvasInitStatus: false,
|
sourcePid: null,
|
resourceId: null,
|
opt: null,
|
baseWidth: 10,
|
baseHeight: 10
|
})
|
|
const tabSort = () => {
|
if (curComponent.value) {
|
customTabsSortRef.value.sortInit(curComponent.value)
|
}
|
}
|
|
// 启用拖动
|
const enableDragging = e => {
|
if (isSpaceDown.value) {
|
// 仅在空格键按下时启用拖动
|
isDragging = true
|
startX = e.pageX - canvasOut.value.wrapRef.offsetLeft
|
startY = e.pageY - canvasOut.value.wrapRef.offsetTop
|
scrollLeft = canvasOut.value.wrapRef.scrollLeft
|
scrollTop = canvasOut.value.wrapRef.scrollTop
|
e.preventDefault()
|
e.stopPropagation()
|
}
|
}
|
|
// 执行拖动
|
const onMouseMove = e => {
|
if (!isDragging) return
|
e.preventDefault()
|
e.stopPropagation()
|
const x = e.pageX - canvasOut.value.wrapRef.offsetLeft
|
const y = e.pageY - canvasOut.value.wrapRef.offsetTop
|
const walkX = x - startX
|
const walkY = y - startY
|
canvasOut.value.wrapRef.scrollLeft = scrollLeft - walkX
|
canvasOut.value.wrapRef.scrollTop = scrollTop - walkY
|
}
|
|
// 禁用拖动
|
const disableDragging = () => {
|
isDragging = false
|
}
|
|
const contentStyle = computed(() => {
|
const { width, height } = canvasStyleData.value
|
if (editMode.value === 'preview') {
|
return {
|
width: '100%',
|
height: 'auto',
|
overflow: 'hidden'
|
}
|
} else {
|
return {
|
minWidth: '1600px',
|
width: width * scrollOffset.value + 'px',
|
height: height * scrollOffset.value + 'px'
|
}
|
}
|
})
|
|
// 通过实时监听的方式直接添加组件
|
const handleNew = newComponentInfo => {
|
state.countTime++
|
const { componentName, innerType, staticMap } = newComponentInfo
|
if (componentName) {
|
const { width, height, scale } = canvasStyleData.value
|
const component = findNewComponent(componentName, innerType, staticMap)
|
component.style.top = ((height - component.style.height) * scale) / 200
|
component.style.left = ((width - component.style.width) * scale) / 200
|
component.id = guid()
|
const popComponents = componentData.value.filter(
|
ele => ele.category && ele.category === 'hidden'
|
)
|
// 弹框区域组件 只允许有一个过滤组件
|
if (
|
canvasState.value.curPointArea === 'hidden' &&
|
component.component === 'VQuery' &&
|
(!popComponents || popComponents.length === 0)
|
) {
|
component.category = canvasState.value.curPointArea
|
component.commonBackground.backgroundColor = 'rgba(41, 41, 41, 1)'
|
}
|
changeComponentSizeWithScale(component)
|
dvMainStore.addComponent({ component: component, index: undefined })
|
adaptCurThemeCommonStyle(component)
|
snapshotStore.recordSnapshotCache('renderChart', component.id)
|
if (state.countTime > 10) {
|
state.sideShow = false
|
nextTick(() => {
|
state.countTime = 0
|
state.sideShow = true
|
})
|
}
|
useEmitt().emitter.emit('initScroll')
|
}
|
}
|
|
const handleDrop = e => {
|
e.preventDefault()
|
e.stopPropagation()
|
const componentInfo = e.dataTransfer.getData('id')
|
const rectInfo = editorMap.value[state.canvasId].getBoundingClientRect()
|
if (componentInfo) {
|
const component = findDragComponent(componentInfo)
|
component.style.top = e.clientY - rectInfo.y
|
component.style.left = e.clientX - rectInfo.x
|
component.id = guid()
|
changeComponentSizeWithScale(component)
|
dvMainStore.addComponent({ component: component, index: undefined })
|
adaptCurThemeCommonStyle(component)
|
snapshotStore.recordSnapshotCache('renderChart', component.id)
|
}
|
}
|
|
const handleDragOver = e => {
|
e.preventDefault()
|
e.dataTransfer.dropEffect = 'copy'
|
}
|
|
const handleMouseDown = e => {
|
// e.stopPropagation()
|
if (isSpaceDown.value) {
|
return
|
}
|
dvMainStore.setClickComponentStatus(false)
|
// 点击画布的空区域 提前清空curComponent 防止右击菜单内容抖动
|
dvMainStore.setCurComponent({ component: null, index: null })
|
dvMainStore.setInEditorStatus(true)
|
mainCanvasCoreRef.value.handleMouseDown(e)
|
}
|
|
const deselectCurComponent = e => {
|
if (isSpaceDown.value) {
|
return
|
}
|
if (!isClickComponent.value) {
|
curComponent.value && dvMainStore.setCurComponent({ component: null, index: null })
|
}
|
|
// 0 左击 1 滚轮 2 右击
|
if (e.button != 2) {
|
contextmenuStore.hideContextMenu()
|
}
|
}
|
|
const initDataset = () => {
|
getDatasetTree({}).then(res => {
|
state.datasetTree = (res as unknown as Tree[]) || []
|
})
|
}
|
|
const scrollOffset = computed(() => (canvasStyleData.value.scale < 150 ? 1.5 : 2))
|
|
// 全局监听按键事件
|
listenGlobalKeyDown()
|
|
const initScroll = () => {
|
nextTick(() => {
|
if (canvasCenterRef.value) {
|
const { width, height } = canvasStyleData.value
|
const mainWidth = canvasCenterRef.value.clientWidth
|
mainHeight.value = canvasCenterRef.value.clientHeight
|
const scrollX = (scrollOffset.value * width - mainWidth) / 2
|
const scrollY = (scrollOffset.value * height - mainHeight.value) / 2 + 20
|
// 设置画布初始滚动条位置
|
canvasOut.value.scrollTo(scrollX, scrollY)
|
}
|
})
|
}
|
const doUseCache = flag => {
|
const canvasCache = wsCache.get('DE-DV-CATCH-' + state.resourceId)
|
if (flag && canvasCache) {
|
const canvasCacheSeries = deepCopy(canvasCache)
|
snapshotStore.snapshotPublish(canvasCacheSeries)
|
state.canvasInitStatus = true
|
nextTick(() => {
|
dvMainStore.setDataPrepareState(true)
|
snapshotStore.recordSnapshotCache('renderChart')
|
setTimeout(() => {
|
// 使用缓存时，初始化的保存按钮为激活状态
|
snapshotStore.recordSnapshotCache('renderChart')
|
}, 2000)
|
})
|
} else {
|
initLocalCanvasData(() => {
|
// do init
|
})
|
wsCache.delete('DE-DV-CATCH-' + state.resourceId)
|
}
|
}
|
|
const initLocalCanvasData = async callback => {
|
const { opt, sourcePid, resourceId } = state
|
const busiFlag = opt === 'copy' ? 'dataV-copy' : 'dataV'
|
await initCanvasData(
|
resourceId,
|
{ busiFlag, resourceTable: 'snapshot', source: 'main-edit' },
|
function () {
|
state.canvasInitStatus = true
|
// afterInit
|
nextTick(() => {
|
dvMainStore.setDataPrepareState(true)
|
snapshotStore.recordSnapshotCache('renderChart')
|
if (dvInfo.value && opt === 'copy') {
|
dvInfo.value.dataState = 'prepare'
|
dvInfo.value.optType = 'copy'
|
dvInfo.value.pid = sourcePid
|
setTimeout(() => {
|
snapshotStore.recordSnapshotCache('renderChart')
|
}, 1500)
|
}
|
onInitReady({ resourceId: resourceId })
|
callback && callback()
|
})
|
}
|
)
|
}
|
|
const previewScaleChange = () => {
|
state.scaleHistory = canvasStyleData.value.scale
|
nextTick(() => {
|
let canvasWidth = dvLayout.value.clientWidth
|
const previewScale = (canvasWidth * 100) / canvasStyleData.value.width
|
canvasStyleData.value.scale = previewScale
|
})
|
}
|
|
watch(
|
() => editMode.value,
|
val => {
|
if (val === 'edit') {
|
if (state.scaleHistory) {
|
canvasStyleData.value.scale = state.scaleHistory
|
}
|
initScroll()
|
} else {
|
previewScaleChange()
|
}
|
}
|
)
|
const checkPer = async resourceId => {
|
if (!window.DataEaseBi || !resourceId) {
|
return true
|
}
|
const request = { busiFlag: 'dataV', resourceTable: 'core' }
|
await interactiveStore.setInteractive(request)
|
return check(wsCache.get('screen-weight'), resourceId, 4)
|
}
|
// 目标校验： 需要校验targetSourceId 是否是当前可视化资源ID
|
const winMsgHandle = event => {
|
const msgInfo = event.data
|
if (msgInfo?.targetSourceId === dvInfo.value.id + '')
|
if (msgInfo.type === 'webParams') {
|
// 网络消息处理
|
winMsgWebParamsHandle(msgInfo)
|
}
|
}
|
|
const winMsgWebParamsHandle = msgInfo => {
|
const params = msgInfo.params
|
dvMainStore.addWebParamsFilter(params)
|
}
|
|
const loadFinish = ref(false)
|
const newWindowFromDiv = ref(false)
|
let p = null
|
const XpackLoaded = () => p(true)
|
onMounted(async () => {
|
document.body.style.overflow = 'hidden'
|
dvMainStore.setCurComponent({ component: null, index: null })
|
snapshotStore.initSnapShot()
|
if (window.location.hash.includes('#/dvCanvas')) {
|
newWindowFromDiv.value = true
|
}
|
await new Promise(r => (p = r))
|
loadFinish.value = true
|
window.addEventListener('blur', releaseAttachKey)
|
window.addEventListener('message', winMsgHandle)
|
if (editMode.value === 'edit') {
|
window.addEventListener('storage', eventCheck)
|
}
|
const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
|
const pid = embeddedStore.pid || router.currentRoute.value.query.pid
|
const templateParams =
|
embeddedStore.templateParams || router.currentRoute.value.query.templateParams
|
createType = embeddedStore.createType || router.currentRoute.value.query.createType
|
const opt = embeddedStore.opt || router.currentRoute.value.query.opt
|
const checkDvId = opt && opt === 'copy' ? null : dvId
|
const checkResult = await checkPer(checkDvId)
|
if (!checkResult) {
|
return
|
}
|
initDataset()
|
state.resourceId = dvId
|
state.sourcePid = pid
|
state.opt = opt
|
if (dvId) {
|
state.canvasInitStatus = false
|
const canvasCache = wsCache.get('DE-DV-CATCH-' + dvId)
|
if (canvasCache) {
|
canvasCacheOutRef.value?.dialogInit({ canvasType: 'dataV', resourceId: dvId })
|
} else {
|
await initLocalCanvasData(() => {
|
// do init
|
})
|
}
|
} else if (opt && opt === 'create') {
|
state.canvasInitStatus = false
|
let watermarkBaseInfo
|
try {
|
await watermarkFind().then(rsp => {
|
watermarkBaseInfo = rsp.data
|
watermarkBaseInfo.settingContent = JSON.parse(watermarkBaseInfo.settingContent)
|
})
|
} catch (e) {
|
console.error('can not find watermark info')
|
}
|
let deTemplateData
|
let preName
|
if (createType === 'template') {
|
const templateParamsApply = JSON.parse(Base64.decode(decodeURIComponent(templateParams + '')))
|
await decompressionPre(templateParamsApply, result => {
|
deTemplateData = result
|
preName = deTemplateData.baseInfo?.preName
|
})
|
}
|
dvMainStore.createInit('dataV', null, pid, watermarkBaseInfo, preName)
|
nextTick(() => {
|
state.canvasInitStatus = true
|
dvMainStore.setDataPrepareState(true)
|
snapshotStore.recordSnapshotCache('renderChart')
|
// 从模板新建
|
if (createType === 'template') {
|
dvMainStore.setComponentData(deTemplateData['componentData'])
|
dvMainStore.setCanvasStyle(deTemplateData['canvasStyleData'])
|
dvMainStore.setCanvasViewInfo(deTemplateData['canvasViewInfo'])
|
dvMainStore.setAppDataInfo(deTemplateData['appData'])
|
setTimeout(() => {
|
snapshotStore.recordSnapshotCache('template')
|
}, 1500)
|
}
|
if (dvMainStore.getAppDataInfo()) {
|
eventBus.emit('save')
|
}
|
})
|
} else {
|
let url = '#/screen/index'
|
window.open(url, '_self')
|
}
|
initScroll()
|
useEmitt({
|
name: 'initScroll',
|
callback: function () {
|
initScroll()
|
}
|
})
|
})
|
|
onUnmounted(() => {
|
document.body.style.overflow = ''
|
window.removeEventListener('storage', eventCheck)
|
window.removeEventListener('blur', releaseAttachKey)
|
eventBus.off('handleNew', handleNew)
|
eventBus.off('tabSort', tabSort)
|
})
|
|
const previewStatus = computed(() => editMode.value === 'preview')
|
|
const otherEditorShow = computed(() => {
|
return Boolean(
|
curComponent.value &&
|
(!['UserView', 'GroupArea', 'VQuery'].includes(curComponent.value?.component) ||
|
(curComponent.value?.component === 'UserView' &&
|
curComponent.value?.innerType === 'picture-group')) &&
|
!batchOptStatus.value
|
)
|
})
|
const canvasPropertiesShow = computed(
|
() => !curComponent.value || ['GroupArea'].includes(curComponent.value.component)
|
)
|
const viewsPropertiesShow = computed(() => {
|
return Boolean(
|
curComponent.value &&
|
['UserView', 'VQuery'].includes(curComponent.value.component) &&
|
curComponent.value.innerType !== 'picture-group' &&
|
!batchOptStatus.value
|
)
|
})
|
|
const scrollCanvas = e => {
|
deWRulerRef.value.rulerScroll(e)
|
deHRulerRef.value.rulerScroll(e)
|
}
|
|
const coreComponentData = computed(() =>
|
componentData.value.filter(ele => !ele.category || ele.category !== 'hidden')
|
)
|
|
const popComponentData = computed(() =>
|
componentData.value.filter(ele => ele.category && ele.category === 'hidden')
|
)
|
|
const doRecoverToPublished = () => {
|
recoverToPublished({ id: dvInfo.value.id, type: 'dataV', name: dvInfo.value.name }).then(() => {
|
state.resourceId = dvInfo.value.id
|
state.sourcePid = dvInfo.value.pid
|
state.opt = null
|
initLocalCanvasData(() => {
|
dvMainStore.updateDvInfoCall(1)
|
useEmitt().emitter.emit('calcData-all')
|
})
|
})
|
}
|
|
eventBus.on('handleNew', handleNew)
|
|
eventBus.on('tabSort', tabSort)
|
</script>
|
|
<template>
|
<div
|
ref="dvLayout"
|
class="dv-common-layout"
|
:class="isDataEaseBi && !newWindowFromDiv && 'dataease-w-h'"
|
>
|
<DvToolbar @recover-to-published="doRecoverToPublished" />
|
<div class="custom-dv-divider" />
|
<el-container
|
v-if="loadFinish"
|
v-loading="requestStore.loadingMap && requestStore.loadingMap[permissionStore.currentPath]"
|
element-loading-background="rgba(0, 0, 0, 0)"
|
class="dv-layout-container"
|
:class="{ 'preview-layout-container': previewStatus }"
|
>
|
<!-- 左侧组件列表 -->
|
<dv-sidebar
|
:title="t('visualization.layer_management')"
|
:width="180"
|
:scroll-width="3"
|
:aside-position="'left'"
|
:side-name="'realTimeComponent'"
|
class="left-sidebar"
|
id="dv-main-left-sidebar"
|
:class="{ 'preview-aside': previewStatus }"
|
>
|
<real-time-list-tree />
|
</dv-sidebar>
|
<!-- 中间画布 -->
|
<main id="dv-main-center" class="center" ref="canvasCenterRef">
|
<div class="de-ruler-icon-outer">
|
<el-icon class="de-ruler-icon">
|
<Icon name="dv-ruler"><dvRuler class="svg-icon" /></Icon>
|
</el-icon>
|
</div>
|
<de-ruler ref="deWRulerRef" @update:tickSize="val => (state.baseWidth = val)"></de-ruler>
|
<de-ruler
|
direction="vertical"
|
@update:tickSize="val => (state.baseHeight = val)"
|
:size="mainHeight"
|
ref="deHRulerRef"
|
></de-ruler>
|
<el-scrollbar
|
ref="canvasOut"
|
@scroll="scrollCanvas"
|
class="content"
|
:class="{ 'preview-content': previewStatus }"
|
@mousedown="enableDragging"
|
@mouseup="disableDragging"
|
@mousemove="onMouseMove"
|
@mouseleave="disableDragging"
|
>
|
<div
|
id="canvas-dv-outer"
|
ref="canvasInner"
|
:style="contentStyle"
|
@drop="handleDrop"
|
@dragover="handleDragOver"
|
@mousedown="handleMouseDown"
|
@mouseup="deselectCurComponent"
|
>
|
<div v-if="isSpaceDown" class="canvas-drag"></div>
|
<div class="canvas-dv-inner">
|
<canvas-core
|
class="canvas-area-shadow editor-main"
|
v-if="state.canvasInitStatus"
|
ref="mainCanvasCoreRef"
|
:component-data="coreComponentData"
|
:pop-component-data="popComponentData"
|
:canvas-style-data="canvasStyleData"
|
:canvas-view-info="canvasViewInfo"
|
:canvas-id="state.canvasId"
|
:base-height="state.baseHeight"
|
:base-width="state.baseWidth"
|
:font-family="canvasStyleData.fontFamily"
|
>
|
<template v-slot:canvasDragTips>
|
<div class="canvas-drag-tip">
|
{{ t('visualization.hold_canvas_tips') }}
|
</div>
|
</template>
|
</canvas-core>
|
</div>
|
</div>
|
</el-scrollbar>
|
<ComponentToolBar :class="{ 'preview-aside-x': previewStatus }"></ComponentToolBar>
|
</main>
|
<!-- 右侧侧组件列表 -->
|
<div style="width: auto; height: 100%" ref="leftSidebarRef">
|
<template v-if="!batchOptStatus && state.sideShow">
|
<dv-sidebar
|
v-if="otherEditorShow"
|
:title="curComponent['name']"
|
:width="240"
|
:side-name="'componentProp'"
|
:aside-position="'right'"
|
class="left-sidebar"
|
:slide-index="2"
|
:themes="'dark'"
|
:element="curComponent"
|
:view="canvasViewInfo[curComponent.id]"
|
:class="{ 'preview-aside': editMode === 'preview' }"
|
>
|
<component :is="findComponentAttr(curComponent)" />
|
</dv-sidebar>
|
<dv-sidebar
|
v-show="canvasPropertiesShow"
|
:title="t('visualization.screen_config')"
|
:width="240"
|
:side-name="'canvas'"
|
:aside-position="'right'"
|
class="left-sidebar"
|
:class="{ 'preview-aside': editMode === 'preview' }"
|
>
|
<canvas-attr></canvas-attr>
|
</dv-sidebar>
|
<div
|
v-show="viewsPropertiesShow"
|
style="height: 100%"
|
:class="{ 'preview-aside': editMode === 'preview' }"
|
>
|
<editor
|
:view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
|
themes="dark"
|
:dataset-tree="state.datasetTree"
|
></editor>
|
</div>
|
</template>
|
<dv-sidebar
|
v-if="batchOptStatus"
|
:theme-info="'dark'"
|
:title="t('visualization.batch_style_set')"
|
:width="280"
|
aside-position="right"
|
class="left-sidebar"
|
:side-name="'batchOpt'"
|
>
|
<chart-style-batch-set themes="dark"></chart-style-batch-set>
|
</dv-sidebar>
|
</div>
|
</el-container>
|
</div>
|
<XpackComponent
|
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="
|
@loaded="XpackLoaded"
|
@load-fail="XpackLoaded"
|
/>
|
<xpack-component jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9UaHJlc2hvbGREaWFsb2c=" />
|
<canvas-cache-dialog ref="canvasCacheOutRef" @doUseCache="doUseCache"></canvas-cache-dialog>
|
<dv-preview
|
v-if="fullscreenFlag"
|
style="z-index: 10"
|
ref="dvPreviewRef"
|
show-position="edit-preview"
|
:canvas-data-preview="componentData"
|
:canvas-style-preview="canvasStyleData"
|
:canvas-view-info-preview="canvasViewInfo"
|
:dv-info="{ ...dvInfo, status: 1 }"
|
></dv-preview>
|
<custom-tabs-sort ref="customTabsSortRef"></custom-tabs-sort>
|
</template>
|
|
<style lang="less">
|
.preview-layout-container {
|
}
|
|
.preview-content {
|
align-items: center;
|
}
|
|
.dv-common-layout {
|
height: 100vh;
|
width: 100vw;
|
overflow: hidden;
|
color: @dv-canvas-main-font-color;
|
.dv-layout-container {
|
height: calc(100vh - @top-bar-height - 1px);
|
.left-sidebar {
|
height: 100%;
|
}
|
.center {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
flex: 1;
|
position: relative;
|
background-color: rgba(51, 51, 51, 1);
|
overflow: auto;
|
.content {
|
position: relative;
|
flex: 1;
|
width: 100%;
|
overflow: auto;
|
margin: auto;
|
}
|
}
|
.right-sidebar {
|
height: 100%;
|
}
|
}
|
&.dataease-w-h {
|
height: 100%;
|
width: 100%;
|
.dv-layout-container {
|
height: calc(100% - @top-bar-height);
|
}
|
}
|
}
|
|
.preview-aside {
|
width: 0px !important;
|
overflow: hidden;
|
padding: 0px;
|
}
|
|
.preview-aside-x {
|
height: 0px !important;
|
overflow: hidden;
|
padding: 0px;
|
}
|
|
.canvas-area-shadow {
|
box-sizing: border-box;
|
border: 1px solid rgba(85, 85, 85, 0.4);
|
}
|
|
.custom-dv-divider {
|
width: 100%;
|
height: 1px;
|
background: #000;
|
}
|
|
.canvas-dv-inner {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.de-ruler-icon-outer {
|
background: #2c2c2c;
|
position: absolute;
|
width: 30px;
|
height: 30px;
|
z-index: 3;
|
color: #ebebeb;
|
.de-ruler-icon {
|
margin-left: 6px;
|
margin-top: 6px;
|
font-size: 24px;
|
color: #ebebeb;
|
}
|
}
|
|
.canvas-drag {
|
position: absolute;
|
z-index: 1;
|
opacity: 0.3;
|
cursor: pointer;
|
width: 100%;
|
height: 100%;
|
}
|
|
.canvas-drag-tip {
|
position: absolute;
|
right: 5px;
|
bottom: -20px;
|
font-size: 12px;
|
color: rgb(169, 175, 184);
|
}
|
</style>
|
