center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge branch 'dev-v2' into pr@dev-v2_dzz

Browse Source
This commit is contained in:
dataeaseShu 2023-12-13 15:00:33 +08:00
commit db5f47758a
10 changed files with 572 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
core/core-frontend/src/components/data-visualization/RealTimeComponentTreeList.vue → core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
View File

@ -3,7 +3,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
import { storeToRefs } from 'pinia'
import { ElCol, ElIcon, ElRow } from 'element-plus-secondary'
import { ElIcon, ElRow } from 'element-plus-secondary'
import Icon from '../icon-custom/src/Icon.vue'
import { computed, nextTick, ref } from 'vue'
import draggable from 'vuedraggable'
@ -11,7 +11,6 @@ import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
const dropdownMore = ref(null)
const lockStore = lockStoreWithOut()
@ -19,11 +18,13 @@ const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const layerStore = layerStoreWithOut()
const composeStore = composeStoreWithOut()
const contextmenuStore = contextmenuStoreWithOut()
const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
const { componentData, curComponent, curComponentIndex, canvasViewInfo } = storeToRefs(dvMainStore)
const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
const componentData = computed(() => dvMainStore.componentData)
const getComponent = index => {
return componentData.value[componentData.value.length - 1 - index]
}
@ -87,24 +88,6 @@ const onClick = (e, index) => {
setCurComponent(index)
composeStore.setLaterIndex(index)
}
const deleteComponent = (number: number) => {
setTimeout(() => {
dvMainStore.deleteComponentById(curComponent.value.id)
snapshotStore.recordSnapshotCache('renderChart')
})
}
const upComponent = (number: number) => {
setTimeout(() => {
layerStore.upComponent()
snapshotStore.recordSnapshotCache()
})
}
const downComponent = (number: number) => {
setTimeout(() => {
layerStore.downComponent()
snapshotStore.recordSnapshotCache('realTime-downComponent')
})
}
const setCurComponent = index => {
dvMainStore.setCurComponent({ component: componentData.value[index], index })
}
@ -113,7 +96,9 @@ let nameEdit = ref(false)
let editComponentId = ref('')
let inputName = ref('')
let nameInput = ref(null)
let curEditComponent = null
const editComponentName = item => {
curEditComponent = curComponent.value
editComponentId.value = `#component-label-${item.id}`
nameEdit.value = true
inputName.value = item.name
@ -126,15 +111,12 @@ const closeEditComponentName = () => {
if (!inputName.value || !inputName.value.trim()) {
return
}
if (inputName.value.trim() === curComponent.value.name) {
if (inputName.value.trim() === curEditComponent.name) {
return
}
curComponent.value.name = inputName.value
curEditComponent.name = inputName.value
inputName.value = ''
}
const toggleComponentVisible = () => {
// do toggleComponentVisible
curEditComponent = null
}
const lock = () => {
@ -198,9 +180,6 @@ const menuAsideClose = (param, index) => {
}, 200)
}
}
const rename = item => {
editComponentName(item)
}
const handleContextMenu = e => {
e.preventDefault()
@ -248,12 +227,15 @@ const handleContextMenu = e => {
areaData.components.includes(getComponent(index))
}"
@click="onClick($event, transformIndex(index))"
@dblclick="editComponentName(getComponent(index))"
>
<el-icon class="component-icon">
<Icon :name="getIconName(getComponent(index))"></Icon>
</el-icon>
<span :id="`component-label-${getComponent(index)?.id}`" class="component-label">
<span
:id="`component-label-${getComponent(index)?.id}`"
class="component-label"
@dblclick="editComponentName(getComponent(index))"
>
{{ getComponent(index)?.name }}
</span>
<div
@ -293,7 +275,7 @@ const handleContextMenu = e => {
trigger="click"
placement="bottom-start"
effect="dark"
hide-timeout="0"
:hide-timeout="0"
>
<span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
<el-icon class="component-base">
@ -313,7 +295,7 @@ const handleContextMenu = e => {
trigger="contextmenu"
placement="bottom-start"
effect="dark"
hide-timeout="0"
:hide-timeout="0"
>
<compose-show
:show-border="false"

481
core/core-frontend/src/components/data-visualization/RealTimeListTree.vue Normal file
View File

@ -0,0 +1,481 @@
<script lang="ts" setup>
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
import { storeToRefs } from 'pinia'
import { ElIcon, ElRow } from 'element-plus-secondary'
import Icon from '../icon-custom/src/Icon.vue'
import { nextTick, ref } from 'vue'
import draggable from 'vuedraggable'
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
import RealTimeGroup from '@/components/data-visualization/RealTimeGroup.vue'
const dropdownMore = ref(null)
const lockStore = lockStoreWithOut()
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const layerStore = layerStoreWithOut()
const composeStore = composeStoreWithOut()
const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
const { componentData, curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
const getComponent = index => {
return componentData.value[componentData.value.length - 1 - index]
}
const transformIndex = index => {
return componentData.value.length - 1 - index
}
const areaDataPush = component => {
if (component && !component.isLock && component.isShow) {
areaData.value.components.push(component)
}
}
// shift 选择算法逻辑
// 1.记录上次点击的laterIndex（初始状态laterIndex=0）;
// 2.获取当前index curClickIndex;
// 3.比较laterIndex 和 curClickIndex之间的大小;
// 4.将[laterIndex,curClickIndex] 或者 [curClickIndex,laterIndex]区域的图层加入areaData.value.components(已包含的不再重复加入);
const shiftDataPush = curClickIndex => {
const areaDataIdArray = areaData.value.components.map(com => com.id)
let indexBegin, indexEnd
const laterIndexTrans = laterIndex.value === null ? componentData.value.length : laterIndex.value
if (laterIndexTrans < curClickIndex) {
indexBegin = laterIndexTrans
indexEnd = curClickIndex
} else {
indexBegin = curClickIndex
indexEnd = laterIndexTrans
}
const shiftAreaComponents = componentData.value
.slice(indexBegin, indexEnd + 1)
.filter(
component => !areaDataIdArray.includes(component.id) && !component.isLock && component.isShow
)
areaData.value.components.push(...shiftAreaComponents)
dvMainStore.setCurComponent({ component: null, index: null })
}
const onClick = (e, index) => {
// 初始化点击是 laterIndex=0
if (!curComponent.value) {
composeStore.setLaterIndex(null)
}
// ctrl or command 按下时 鼠标点击为选择需要组合的组件(取消需要组合的组件在ComposeShow组件中)
if (isCtrlOrCmdDown.value && !areaData.value.components.includes(componentData.value[index])) {
areaDataPush(componentData.value[index])
if (curComponent.value && curComponent.value.id !== componentData.value[index].id) {
areaDataPush(curComponent.value)
}
dvMainStore.setCurComponent({ component: null, index: null })
e.stopPropagation()
composeStore.setLaterIndex(index)
return
}
//shift操作逻辑
if (isShiftDown.value) {
shiftDataPush(index)
return
}
//其他情况点击清理选择区域
areaData.value.components.splice(0, areaData.value.components.length)
setCurComponent(index)
composeStore.setLaterIndex(index)
}
const setCurComponent = index => {
dvMainStore.setCurComponent({ component: componentData.value[index], index })
}
let nameEdit = ref(false)
let editComponentId = ref('')
let inputName = ref('')
let nameInput = ref(null)
let curEditComponent = null
const editComponentName = item => {
curEditComponent = curComponent.value
editComponentId.value = `#component-label-${item.id}`
nameEdit.value = true
inputName.value = item.name
nextTick(() => {
nameInput.value.focus()
})
}
const closeEditComponentName = () => {
nameEdit.value = false
if (!inputName.value || !inputName.value.trim()) {
return
}
if (inputName.value.trim() === curEditComponent.name) {
return
}
curEditComponent.name = inputName.value
inputName.value = ''
curEditComponent = null
}
const lock = () => {
setTimeout(() => {
lockStore.lock()
snapshotStore.recordSnapshotCache('realTime-lock')
})
}
const unlock = () => {
setTimeout(() => {
lockStore.unlock()
snapshotStore.recordSnapshotCache('realTime-unlock')
})
}
const hideComponent = () => {
setTimeout(() => {
layerStore.hideComponent()
snapshotStore.recordSnapshotCache('realTime-hideComponent')
})
}
const showComponent = () => {
setTimeout(() => {
layerStore.showComponent()
snapshotStore.recordSnapshotCache()
})
}
const dragOnEnd = ({ oldIndex, newIndex }) => {
const source = componentData.value[newIndex]
const comLength = componentData.value.length
// 还原数组
componentData.value.splice(newIndex, 1)
componentData.value.splice(oldIndex, 0, source)
const target = componentData.value[comLength - 1 - oldIndex]
// 反向移动数组
componentData.value.splice(comLength - 1 - oldIndex, 1)
componentData.value.splice(comLength - 1 - newIndex, 0, target)
dvMainStore.setCurComponent({ component: target, index: transformIndex(comLength - oldIndex) })
}
const getIconName = item => {
if (item.component === 'UserView') {
const viewInfo = canvasViewInfo.value[item.id]
return `${viewInfo.type}-origin`
} else {
return item.icon
}
}
const menuAsideClose = (param, index) => {
const iconDom = document.getElementById('close-button')
if (iconDom) {
iconDom.click()
}
if (param.opt === 'rename') {
setTimeout(() => {
editComponentName(getComponent(index))
}, 200)
}
}
const handleContextMenu = e => {
e.preventDefault()
// 获取鼠标点击位置
const x = e.clientX
const y = e.clientY
const customContextMenu = document.createElement('div')
customContextMenu.style.position = 'fixed'
customContextMenu.style.left = x + 'px'
customContextMenu.style.top = y + 'px'
// 将自定义菜单添加到页面
document.body.appendChild(customContextMenu)
// 为自定义菜单添加事件监听器，例如，点击菜单项后执行的操作
customContextMenu.addEventListener('click', () => {
// 在这里执行菜单项点击后的操作
// 例如，关闭菜单
document.body.removeChild(customContextMenu)
})
}
</script>
<template>
<!--为了保持图层视觉上的一致性 这里进行数组的倒序排列 相应的展示和移动按照倒序处理-->
<div class="real-time-component-list">
<button hidden="true" id="close-button"></button>
<el-row class="list-wrap">
<div class="list-container" @contextmenu="handleContextMenu">
<draggable
@end="dragOnEnd"
:list="componentData"
animation="100"
class="drag-list"
item-key="id"
>
<template #item="{ index }">
<div>
<div
:title="getComponent(index)?.name"
class="component-item"
:class="{
'container-item-not-show': !getComponent(index)?.isShow,
activated:
(curComponent && curComponent?.id === getComponent(index)?.id) ||
areaData.components.includes(getComponent(index))
}"
@click="onClick($event, transformIndex(index))"
>
<el-icon class="component-icon">
<Icon :name="getIconName(getComponent(index))"></Icon>
</el-icon>
<span
:id="`component-label-${getComponent(index)?.id}`"
class="component-label"
@dblclick="editComponentName(getComponent(index))"
>
{{ getComponent(index)?.name }}
</span>
<div
v-show="!nameEdit || (nameEdit && curComponent?.id !== getComponent(index)?.id)"
class="icon-container"
:class="{
'icon-container-lock':
getComponent(index)?.isLock && getComponent(index)?.isShow,
'icon-container-show': !getComponent(index)?.isShow
}"
>
<el-icon
class="component-base component-icon-display"
v-show="!getComponent(index).isShow"
@click="showComponent"
>
<Icon name="dv-eye-close" class="opt-icon"></Icon>
</el-icon>
<el-icon
class="component-base"
v-show="getComponent(index)?.isShow"
@click="hideComponent"
>
<Icon name="dv-show" class="opt-icon"></Icon>
</el-icon>
<el-icon
v-show="!getComponent(index)?.isLock"
class="component-base"
@click="lock"
>
<Icon class="opt-icon" name="dv-unlock"></Icon>
</el-icon>
<el-icon
class="component-base component-icon-display"
v-show="getComponent(index)?.isLock"
@click="unlock"
>
<Icon name="dv-lock" class="opt-icon"></Icon>
</el-icon>
<el-dropdown
ref="dropdownMore"
trigger="click"
placement="bottom-start"
effect="dark"
:hide-timeout="0"
>
<span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
<el-icon class="component-base">
<Icon name="dv-more" class="opt-icon"></Icon>
</el-icon>
</span>
<template #dropdown>
<context-menu-aside-details
:element="getComponent(index)"
@close="menuAsideClose($event, index)"
></context-menu-aside-details>
</template>
</el-dropdown>
</div>
<el-dropdown
class="compose-dropdown"
trigger="contextmenu"
placement="bottom-start"
effect="dark"
:hide-timeout="0"
>
<compose-show
:show-border="false"
:element-index="transformIndex(index)"
:element="getComponent(index)"
></compose-show>
<template #dropdown>
<context-menu-aside-details
:element="getComponent(index)"
@close="menuAsideClose($event, index)"
></context-menu-aside-details>
</template>
</el-dropdown>
</div>
</div>
</template>
</draggable>
<el-row style="width: 100%; height: 150px"></el-row>
</div>
</el-row>
<Teleport v-if="editComponentId && nameEdit" :to="editComponentId">
<input
@keydown.stop
@keyup.stop
ref="nameInput"
v-model="inputName"
@blur="closeEditComponentName"
/>
</Teleport>
</div>
</template>
<style lang="less" scoped>
.real-time-component-list {
white-space: nowrap;
.list-wrap {
max-height: calc(100% - @component-toolbar-height);
overflow-y: auto;
width: 100%;
.list-container {
width: 100%;
.component-item {
position: relative;
height: 30px;
width: 100%;
cursor: grab;
color: @dv-canvas-main-font-color;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 12px;
padding: 0 2px 0 22px;
user-select: none;
.component-icon {
color: #a6a6a6;
font-size: 14px;
}
.component-label {
color: #ebebeb;
}
> span.component-label {
font-size: 12px;
margin-left: 10px;
position: relative;
min-width: 65px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
input {
position: absolute;
left: 0;
width: 100%;
background-color: white;
outline: none;
border: none;
border-radius: 2px;
padding: 0 4px;
height: 100%;
}
}
&:active {
cursor: grabbing;
}
&:hover {
background-color: rgba(235, 235, 235, 0.1);
.icon-container {
.component-base {
opacity: 1;
}
width: 70px !important;
}
}
.icon-container {
.component-base {
opacity: 0;
}
width: 0px;
display: flex;
justify-content: flex-end;
align-items: center;
flex-grow: 1;
cursor: none;
i {
font-size: 16px;
cursor: pointer;
}
}
}
.activated {
background-color: rgba(51, 112, 255, 0.1) !important;
:deep(.component-icon) {
color: #3370ff;
}
:deep(.component-label) {
color: #3370ff;
}
}
}
}
}
.real-time-component-list :deep(.ed-popper) {
background: #303133 !important;
}
.component-base {
cursor: pointer;
height: 22px !important;
width: 22px !important;
border-radius: 4px;
padding: 0 4px;
.opt-icon {
font-size: 14px;
}
&:hover {
background: rgba(235, 235, 235, 0.1);
}
&:active {
background: rgba(235, 235, 235, 0.1);
}
}
.component-icon-display {
opacity: 1 !important;
}
.icon-container-show {
width: 70px !important;
}
.icon-container-lock {
width: 45px !important;
}
.container-item-not-show {
color: #5f5f5f !important;
:deep(.component-icon) {
color: #5f5f5f !important;
}
:deep(.component-label) {
color: #5f5f5f !important;
}
}
</style>
<style lang="less">
.compose-dropdown {
position: initial !important;
}
</style>

8
core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
View File

@ -137,6 +137,11 @@ const props = defineProps({
default() {
return {}
}
},
scale: {
type: Number,
required: false,
default: 1
}
})
@ -191,7 +196,7 @@ const curComponentId = computed(() => {
const { emitter } = useEmitt()
const curScale = computed(() => {
return canvasStyleData.value.scale
return canvasStyleData.value.scale / 100
})
const pointShadowShow = computed(() => {
@ -1269,6 +1274,7 @@ defineExpose({
v-for="(item, index) in componentData"
v-show="item.isShow"
:canvas-id="canvasId"
:scale="curScale"
:key="item.id"
:default-style="item.style"
:style="getShapeItemShowStyle(item)"

4
core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
View File

@ -164,6 +164,8 @@ const commonBackgroundSvgInner = computed(() => {
return null
}
})
const deepScale = computed(() => scale.value / 100)
</script>
<template>
@ -210,7 +212,7 @@ const commonBackgroundSvgInner = computed(() => {
:linkage="config?.linkage"
:show-position="showPosition"
:search-count="searchCount"
:scale="scale"
:scale="deepScale"
:disabled="true"
/>
</div>

10
core/core-frontend/src/components/data-visualization/canvas/Shape.vue
View File

@ -204,10 +204,16 @@ const props = defineProps({
canvasId: {
type: String,
default: 'canvas-main'
},
scale: {
type: Number,
required: false,
default: 1
}
})
const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId } = toRefs(props)
const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId, scale } =
toRefs(props)
const domId = ref('shape-id-' + element.value.id)
const pointList = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
const pointList2 = ['r', 'l']
@ -645,7 +651,7 @@ const componentBackgroundStyle = computed(() => {
innerPadding,
borderRadius
} = element.value.commonBackground
const style = { padding: innerPadding + 'px', borderRadius: borderRadius + 'px' }
const style = { padding: innerPadding * scale.value + 'px', borderRadius: borderRadius + 'px' }
let colorRGBA = ''
if (backgroundColorSelect && backgroundColor) {
colorRGBA = backgroundColor

15
core/core-frontend/src/custom-component/user-view/Component.vue
View File

@ -42,7 +42,7 @@ const props = defineProps({
scale: {
type: Number,
required: false,
default: 100
default: 1
},
dvType: {
type: String,
@ -58,15 +58,14 @@ const props = defineProps({
const { element, view, active, searchCount, scale } = toRefs(props)
const autoStyle = computed(() => {
if (element.value.innerType === 'richText') {
const curScale = scale.value / 100
if (element.value.innerType === 'rich-text') {
return {
position: 'absolute',
height: 100 / curScale + '%!important',
width: 100 / curScale + '%!important',
left: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
top: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
transform: 'scale(' + curScale + ')'
height: 100 / scale.value + '%!important',
width: 100 / scale.value + '%!important',
left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
transform: 'scale(' + scale.value + ')'
} as CSSProperties
} else {
return {}

13
core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
View File

@ -13,6 +13,7 @@ import { defaultsDeep, cloneDeep } from 'lodash-es'
import ChartError from '@/views/chart/components/views/components/ChartError.vue'
import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
import { deepCopy } from '@/utils/utils'
const dvMainStore = dvMainStoreWithOut()
const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@ -34,7 +35,7 @@ const props = defineProps({
scale: {
type: Number,
required: false,
default: 100
default: 1
},
terminal: {
type: String,
@ -113,11 +114,13 @@ const renderChart = async view => {
curView = view
// view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
// 与默认视图对象合并，方便增加配置项
const chart = { ...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)), data: chartData.value }
const chart = deepCopy({
...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)),
data: chartData.value
})
const chartView = chartViewManager.getChartView(view.render, view.type)
console.log('scale=' + scale.value)
recursionTransObj(customAttrTrans, chart.customAttr, scale.value / 100, terminal.value)
recursionTransObj(customStyleTrans, chart.customStyle, scale.value / 100, terminal.value)
recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
switch (chartView.library) {
case ChartLibraryType.L7_PLOT:
renderL7Plot(chart, chartView as L7PlotChartView<any, any>)

30
core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
View File

@ -10,7 +10,8 @@ import {
shallowRef,
ShallowRef,
toRaw,
toRefs
toRefs,
watch
} from 'vue'
import { getData } from '@/api/chart'
import chartViewManager from '@/views/chart/components/js/panel'
@ -22,6 +23,8 @@ import { ElPagination } from 'element-plus-secondary'
import ChartError from '@/views/chart/components/views/components/ChartError.vue'
import { defaultsDeep, cloneDeep } from 'lodash-es'
import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
import { deepCopy } from '@/utils/utils'
const dvMainStore = dvMainStoreWithOut()
const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@ -39,12 +42,21 @@ const props = defineProps({
type: String,
required: false,
default: 'canvas'
},
scale: {
type: Number,
required: false,
default: 1
},
terminal: {
type: String,
default: 'pc'
}
})
const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick'])
const { view, showPosition } = toRefs(props)
const { view, showPosition, scale, terminal } = toRefs(props)
const isError = ref(false)
const errMsg = ref('')
@ -113,10 +125,14 @@ const renderChart = (viewInfo: Chart, resetPageInfo: boolean) => {
return
}
// view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
const chart = {
const chart = deepCopy({
...defaultsDeep(viewInfo, cloneDeep(BASE_VIEW_CONFIG)),
data: chartData.value
} as ChartObj
} as ChartObj)
recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
setupPage(chart, resetPageInfo)
myChart?.destroy()
const chartView = chartViewManager.getChartView(
@ -157,7 +173,7 @@ const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => {
}
}
let scrollTimer
let scrollTimer: number
let scrollTop = 0
const initScroll = () => {
clearInterval(scrollTimer)
@ -201,7 +217,7 @@ const showPage = computed(() => {
const handleCurrentChange = pageNum => {
let extReq = { goPage: pageNum }
if (chartExtRequest) {
if (chartExtRequest.value) {
extReq = { ...extReq, ...chartExtRequest.value }
}
const chart = { ...view.value, chartExtRequest: extReq }
@ -302,7 +318,7 @@ const resize = (width, height) => {
}
const preSize = [0, 0]
const TOLERANCE = 1
let resizeObserver
let resizeObserver: ResizeObserver
onMounted(() => {
isDataEaseBi.value = !!window.DataEaseBi
resizeObserver = new ResizeObserver(([entry] = []) => {

21
core/core-frontend/src/views/chart/components/views/index.vue
View File

@ -93,11 +93,11 @@ const props = defineProps({
scale: {
type: Number,
required: false,
default: 100
default: 1
}
})
const dynamicAreaId = ref('')
const { view, showPosition, element, active, searchCount } = toRefs(props)
const { view, showPosition, element, active, searchCount, scale } = toRefs(props)
const titleShow = computed(
() =>
@ -201,6 +201,10 @@ watch(
{ deep: true }
)
watch([() => scale.value], () => {
initTitle()
})
watch([() => searchCount.value], () => {
// 内部计时器启动 忽略外部计时器
if (!innerRefreshTimer) {
@ -216,6 +220,12 @@ watch([() => resultMode.value], () => {
queryData()
})
watch([() => scale.value], () => {
nextTick(() => {
chartComponent?.value?.renderChart(view.value)
})
})
watch([() => curComponent.value], () => {
if (curComponent.value && curComponent.value.id === view.value.id) {
state.initReady = false
@ -233,7 +243,7 @@ const initTitle = () => {
const customStyle = view.value.customStyle
if (customStyle.text) {
state.title_show = customStyle.text.show
state.title_class.fontSize = customStyle.text.fontSize + 'px'
state.title_class.fontSize = customStyle.text.fontSize * scale.value + 'px'
state.title_class.color = customStyle.text.color
state.title_class.textAlign = customStyle.text.hPosition
state.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
@ -260,8 +270,8 @@ const initTitle = () => {
}
}
const drillJump = index => {
state.drillClickDimensionList = state.drillClickDimensionList.slice(0, index)
const drillJump = (index: number) => {
state.drillClickDimensionList.splice(index)
view.value.chartExtRequest = filter()
calcData(view.value)
}
@ -634,6 +644,7 @@ const toolTip = computed(() => {
/>
<chart-component-s2
:view="view"
:scale="scale"
:show-position="showPosition"
v-else-if="showChartView(ChartLibraryType.S2)"
ref="chartComponent"

3
core/core-frontend/src/views/data-visualization/index.vue
View File

@ -25,6 +25,7 @@ import { changeComponentSizeWithScale } from '@/utils/changeComponentsSizeWithSc
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'
const { wsCache } = useCache()
const eventCheck = e => {
if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
@ -253,7 +254,7 @@ eventBus.on('handleNew', handleNew)
id="dv-main-left-sidebar"
:class="{ 'preview-aside': previewStatus }"
>
<RealTimeComponentList />
<real-time-list-tree />
</dv-sidebar>
<!-- 中间画布 -->
<main id="dv-main-center" class="center" ref="canvasCenterRef">